# Responsive Behavior

**Include when:** Page needs different layouts across breakpoints

---

## Breakpoints

| Name | Range | Primary Use |
|------|-------|-------------|
| Mobile | < 768px | Touch, single column |
| Tablet | 768px - 1024px | Touch/mouse, flexible |
| Desktop | > 1024px | Mouse, multi-column |

---

## Mobile (< 768px)

### Layout Changes
- {What changes from desktop}

### Hidden Elements
- {Elements not shown on mobile}

### Mobile-Specific
- {Touch targets, gestures, etc.}

---

## Tablet (768px - 1024px)

### Layout Changes
- {What changes}

### Adaptations
- {Specific tablet behaviors}

---

## Desktop (> 1024px)

### Full Layout
- {Desktop-specific features}

### Enhancements
- {Hover states, keyboard shortcuts}

---

## Component Breakpoint Behavior

| Component | Mobile | Tablet | Desktop |
|-----------|--------|--------|---------|
| `{component}` | {behavior} | {behavior} | {behavior} |

---

## Navigation Changes

| Breakpoint | Navigation Style |
|------------|------------------|
| Mobile | {hamburger / bottom nav / etc.} |
| Tablet | {style} |
| Desktop | {full nav / sidebar / etc.} |