# Responsive Guidelines

## 1. Breakpoints
- **Desktop Large:** `min-width: 1440px`
- **Desktop / Laptop:** `max-width: 1439px`
- **Tablet:** `max-width: 1024px`
- **Mobile Landscape:** `max-width: 768px`
- **Mobile Portrait:** `max-width: 480px`
- **Small Mobile:** `max-width: 375px`

## 2. Navigation Behavior
- **Desktop:** Inline links.
- **Tablet/Mobile:** Hamburger menu triggering a full-screen overlay (elegant fade-in).

## 3. Spacing Adjustments
- Use CSS clamp for paddings: `padding: clamp(32px, 5vw, 128px) 0;`

## 4. Typography Scaling
- CSS clamp handles all scaling seamlessly. No hard media queries for font sizes.

## 5. Specific Component Fallbacks
- **Timeline (Heritage):** 
  - Desktop: Horizontal Scroll.
  - Mobile: Vertical stacked list (standard scrolling) to avoid frustrating UX.
- **Gallery:**
  - Desktop: Asymmetrical grid.
  - Mobile: Single column stack or a touch-friendly CSS scroll snap slider.