responsive-breakpoints

Responsive Breakpoint Specifications

40 Days of Existential Threats - Interactive Experience Collection

---

Document Information

Property	Value
Project	40 Days of Existential Threats
Document Type	Technical Specification
Version	1.0
Design Approach	Mobile-First

---

1. Breakpoint Overview

Breakpoint Architecture

Breakpoint Name	Range	Primary Use Case	Design Philosophy
Mobile	0 - 767px	Smartphones, portrait orientation	Touch-first, single column, maximum content density
Tablet	768px - 1023px	Tablets, large phones landscape	Balanced touch/mouse, 2-column layouts
Desktop	1024px - 1439px	Laptops, small desktops	Hover-enabled, multi-column, persistent navigation
Large Desktop	1440px+	Large monitors, ultrawide	Maximum whitespace, enhanced visual impact

Breakpoint Rationale

Mobile (0-767px)
├── Target: iPhone SE (375px), iPhone 14 (390px), iPhone 14 Pro Max (430px)
├── Android: Common range 360px - 414px
└── Rationale: Covers 95% of smartphone viewport widths

Tablet (768px-1023px)
├── Target: iPad Mini (768px), iPad (810px), iPad Air (820px)
├── Android tablets: 800px - 1024px
└── Rationale: iPad portrait is the dominant tablet breakpoint

Desktop (1024px-1439px)
├── Target: iPad landscape (1024px), Small laptops (1280px-1366px)
├── Common: 1366px (most popular laptop resolution)
└── Rationale: Covers laptop and small desktop range

Large Desktop (1440px+)
├── Target: 1440px, 1920px, 2560px+
├── Ultrawide: 2560px, 3440px
└── Rationale: High-end displays with ample screen real estate

Exact Pixel Values

Property	Value	Purpose
Mobile max	767px	Last mobile breakpoint before tablet
Tablet min	768px	iPad portrait standard width
Tablet max	1023px	Just before iPad landscape
Desktop min	1024px	iPad landscape, small laptop
Desktop max	1439px	Before large desktop territory
Large Desktop min	1440px	MacBook Pro 15”, common large display
Content max-width	1400px	Optimal reading width for content

---

2. Mobile Specifications (0-767px)

Touch Target Requirements

Element	Minimum Size	Recommended Size	Notes
Primary buttons	44x44px	48x48px	WCAG 2.1 AA compliance
Secondary buttons	44x44px	44x44px	Minimum acceptable
Navigation items	44x44px	48x48px	Bottom nav touch areas
Cards/tiles	88x88px	96x96px	For grid items
Form inputs	44px height	48px height	Comfortable typing
Checkboxes/radio	24x24px	32x32px	Visual + touch area
Close buttons	44x44px	48x48px	Easy dismissal
Progress indicators	44px diameter	48px diameter	Easy tapping

Touch Target Spacing

/* Minimum spacing between touch targets */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}
 
/* Recommended spacing */
.touch-target-recommended {
  min-height: 48px;
  min-width: 48px;
}
 
/* Touch target margin (prevents accidental taps) */
.touch-target + .touch-target {
  margin-left: 8px;
}

Font Size Adjustments

Element	Size	Line Height	Weight	Notes
H1 (Experience Title)	28px	1.2	700	Maximum impact
H2 (Section Headers)	24px	1.3	600	Clear hierarchy
H3 (Card Titles)	20px	1.3	600	Readable at distance
H4 (Subsection)	18px	1.4	600	Secondary emphasis
Body Large	18px	1.6	400	Primary reading text
Body	16px	1.6	400	Standard content
Body Small	14px	1.5	400	Captions, metadata
Caption	12px	1.4	400	Fine print, labels
Button Text	16px	1	500	Action clarity
Navigation	14px	1	500	Compact nav labels

Font Size Code

/* Mobile Typography Scale */
--font-size-h1: 1.75rem;      /* 28px */
--font-size-h2: 1.5rem;       /* 24px */
--font-size-h3: 1.25rem;      /* 20px */
--font-size-h4: 1.125rem;     /* 18px */
--font-size-body-lg: 1.125rem; /* 18px */
--font-size-body: 1rem;        /* 16px */
--font-size-body-sm: 0.875rem; /* 14px */
--font-size-caption: 0.75rem;  /* 12px */

Single Column Layouts

Mobile Layout Structure (0-767px)
┌─────────────────────────────────┐
│          Header (56px)          │
├─────────────────────────────────┤
│                                 │
│      Progress Indicator         │
│         (Full Width)            │
│                                 │
├─────────────────────────────────┤
│                                 │
│         Main Content            │
│      (Single Column, 100%)      │
│                                 │
│    ┌─────────────────────┐      │
│    │   Experience Card   │      │
│    │   (Full Width -     │      │
│    │    16px margins)    │      │
│    └─────────────────────┘      │
│                                 │
│    ┌─────────────────────┐      │
│    │   Experience Card   │      │
│    └─────────────────────┘      │
│                                 │
├─────────────────────────────────┤
│      Bottom Navigation          │
│    (Fixed, 56-64px height)      │
└─────────────────────────────────┘

Layout Specifications

Property	Value	Notes
Container padding	16px (1rem)	Horizontal padding
Section spacing	24px	Between major sections
Card margin	16px	Card outer margin
Card padding	16px	Card internal padding
Element spacing	12px	Between related elements
Compact spacing	8px	Tight groupings

Bottom Navigation Patterns

Bottom Navigation (Mobile)
┌─────────────────────────────────────┐
│  ┌────┐  ┌────┐  ┌────┐  ┌────┐   │
│  │ 🏠 │  │ 📊 │  │ ⚙️ │  │ 👤 │   │
│  │Home│  │Prog│  │Sett│  │Prof│   │
│  └────┘  └────┘  └────┘  └────┘   │
└─────────────────────────────────────┘

Specifications:
- Height: 56px (minimum), 64px (recommended)
- Icon size: 24px
- Label size: 12px
- Touch target: 48x48px per item
- Background: Surface color with shadow
- Safe area: env(safe-area-inset-bottom)

Bottom Navigation Code

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--color-surface);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
}
 
.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  color: var(--color-text-secondary);
}
 
.mobile-bottom-nav__item--active {
  color: var(--color-accent);
}

Swipe Gesture Areas

Gesture	Area	Behavior	Threshold
Swipe Left	Card/Content	Next experience	50px
Swipe Right	Card/Content	Previous experience	50px
Swipe Up	Experience list	Load more	100px
Swipe Down	Content	Refresh/close modal	100px
Edge Swipe	Left edge	Open navigation	20px from edge

Swipe Implementation

/* Swipeable container */
.swipe-container {
  touch-action: pan-y; /* Allow vertical scroll, handle horizontal in JS */
  user-select: none;
}
 
/* Visual feedback during swipe */
.swipe-container--swiping {
  cursor: grabbing;
}
 
/* Minimum swipe distance */
:root {
  --swipe-threshold: 50px;
  --swipe-velocity: 0.3;
}

Reduced Padding/Spacing Scale

Token	Value	Usage
—space-xs	4px	Tightest spacing
—space-sm	8px	Compact elements
—space-md	12px	Default element spacing
—space-lg	16px	Section padding
—space-xl	24px	Major section breaks
—space-2xl	32px	Large separations
—space-3xl	48px	Hero/major sections

Full-Width Buttons

Mobile Button Patterns
┌─────────────────────────────────┐
│  ┌─────────────────────────┐    │
│  │    Primary Action       │    │
│  │    (Full Width)         │    │
│  └─────────────────────────┘    │
│                                 │
│  ┌────────────┐ ┌────────────┐  │
│  │ Secondary  │ │ Secondary  │  │
│  └────────────┘ └────────────┘  │
│                                 │
│  ┌─────────────────────────┐    │
│  │    Destructive Action   │    │
│  │    (Full Width)         │    │
│  └─────────────────────────┘    │
└─────────────────────────────────┘

Button Specifications (Mobile)

Type	Width	Height	Padding	Margin
Primary	100%	48px	16px 24px	8px 0
Secondary	100% or 48%	44px	12px 20px	8px 0
Tertiary	auto	44px	12px 16px	8px
Icon Button	48px	48px	12px	8px

Modal Behavior (Full Screen)

Mobile Modal (Full Screen)
┌─────────────────────────────────┐
│ ←  Modal Title              ✕  │  Header: 56px
├─────────────────────────────────┤
│                                 │
│                                 │
│      Modal Content Area         │
│      (Scrollable)               │
│                                 │
│                                 │
│                                 │
├─────────────────────────────────┤
│  ┌─────────────────────────┐    │
│  │      Primary Action     │    │
│  └─────────────────────────┘    │  Footer: 80px
└─────────────────────────────────┘

Modal Specifications (Mobile)

Property	Value	Notes
Position	Fixed, full viewport	Cover entire screen
Animation	Slide up from bottom	300ms ease-out
Header height	56px	Consistent with app header
Footer height	80px	Space for actions
Content padding	16px	Comfortable reading
Close button	44x44px	Top right corner
Back button	44x44px	Top left (if needed)
Backdrop	None (full screen)	Focus on content

---

3. Tablet Specifications (768px-1023px)

2-Column Grid Layouts

Tablet Layout Structure (768px-1023px)
┌─────────────────────────────────────────────────┐
│              Header (64px)                      │
├─────────────────────────────────────────────────┤
│                                                 │
│           Progress Indicator                    │
│              (Full Width)                       │
│                                                 │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌──────────────────┐ ┌──────────────────┐      │
│  │  Experience 1    │ │  Experience 2    │      │
│  │  (2-col grid)    │ │                  │      │
│  │                  │ │                  │      │
│  └──────────────────┘ └──────────────────┘      │
│                                                 │
│  ┌──────────────────┐ ┌──────────────────┐      │
│  │  Experience 3    │ │  Experience 4    │      │
│  │                  │ │                  │      │
│  └──────────────────┘ └──────────────────┘      │
│                                                 │
├─────────────────────────────────────────────────┤
│              Bottom/Side Navigation             │
└─────────────────────────────────────────────────┘

Grid Specifications (Tablet)

Property	Value	Notes
Grid columns	2	Primary layout
Column gap	16px	Between cards
Row gap	16px	Between rows
Container padding	24px	Horizontal padding
Card aspect ratio	4:3 or auto	Content-dependent

Side Navigation Options

Tablet Side Navigation (Optional)
┌────┬──────────────────────────────────────────┐
│    │                                          │
│ 🏠 │                                          │
│    │           Main Content Area              │
│ 📊 │                                          │
│    │           (2-column grid)                │
│ ⚙️ │                                          │
│    │                                          │
│ 👤 │                                          │
│    │                                          │
└────┴──────────────────────────────────────────┘

Side Nav: 72px width
- Icon only (no labels)
- Active indicator
- Hover states enabled

Navigation Patterns (Tablet)

Pattern	Width	Use Case
Bottom nav	Full width	Portrait orientation
Side nav (icon)	72px	Landscape, more content
Side nav (full)	240px	When space allows
Collapsible	72px → 240px	Expand on hover/tap

Increased Touch Targets

Element	Mobile	Tablet	Increase
Primary buttons	48px	52px	+4px
Navigation items	48px	56px	+8px
Cards	88px	96px	+8px
Form inputs	48px	52px	+4px
Close buttons	48px	52px	+4px

Medium Padding Scale

Token	Mobile	Tablet	Increase
—space-xs	4px	4px	-
—space-sm	8px	8px	-
—space-md	12px	16px	+4px
—space-lg	16px	24px	+8px
—space-xl	24px	32px	+8px
—space-2xl	32px	48px	+16px
—space-3xl	48px	64px	+16px

Split-View Considerations

Tablet Split-View (iPad Multitasking)
┌────────────────────┬────────────────────┐
│                    │                    │
│   Experience       │   Experience       │
│   List (50%)       │   Detail (50%)     │
│                    │                    │
│   ┌──────────┐     │   ┌──────────┐     │
│   │ Item 1   │     │   │ Content  │     │
│   └──────────┘     │   │          │     │
│   ┌──────────┐     │   │          │     │
│   │ Item 2   │     │   │          │     │
│   └──────────┘     │   └──────────┘     │
│                    │                    │
└────────────────────┴────────────────────┘

Minimum width per pane: 320px
Handle 50/50, 66/33, 33/66 splits

---

4. Desktop Specifications (1024px-1439px)

Multi-Column Grids (3-4 Columns)

Desktop Layout Structure (1024px-1439px)
┌─────────────────────────────────────────────────────────────────┐
│  Logo    Nav Item  Nav Item  Nav Item      Search    Profile   │
│  (Header: 64px)                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────┬──────────┬──────────┬──────────┐                  │
│  │ Day 1    │ Day 2    │ Day 3    │ Day 4    │                  │
│  │ Card     │ Card     │ Card     │ Card     │   4-column grid  │
│  │          │          │          │          │   at 1200px+     │
│  └──────────┴──────────┴──────────┴──────────┘                  │
│                                                                 │
│  ┌──────────┬──────────┬──────────┬──────────┐                  │
│  │ Day 5    │ Day 6    │ Day 7    │ Day 8    │                  │
│  └──────────┴──────────┴──────────┴──────────┘                  │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                        Footer                                   │
└─────────────────────────────────────────────────────────────────┘

Grid Specifications (Desktop)

Viewport	Columns	Column Gap	Row Gap	Notes
1024px - 1199px	3	20px	20px	Compact desktop
1200px - 1439px	4	24px	24px	Standard desktop

Grid Code

/* Desktop Grid System */
.desktop-grid {
  display: grid;
  gap: var(--grid-gap);
}
 
/* 1024px - 1199px: 3 columns */
@media (min-width: 1024px) and (max-width: 1199px) {
  .desktop-grid {
    grid-template-columns: repeat(3, 1fr);
    --grid-gap: 20px;
  }
}
 
/* 1200px - 1439px: 4 columns */
@media (min-width: 1200px) and (max-width: 1439px) {
  .desktop-grid {
    grid-template-columns: repeat(4, 1fr);
    --grid-gap: 24px;
  }
}

Hover States Enabled

Element	Hover Effect	Transition	Notes
Cards	Scale 1.02, shadow increase	200ms ease	Subtle lift
Buttons	Background lighten 10%	150ms ease	Clear feedback
Links	Underline, color shift	150ms ease	Standard pattern
Navigation	Background highlight	150ms ease	Active state
Images	Slight zoom (1.05)	300ms ease	Reveal detail

Hover State Code

/* Card hover effect */
.experience-card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
 
.experience-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
 
/* Button hover effect */
.btn-primary {
  transition: background-color 150ms ease, transform 150ms ease;
}
 
.btn-primary:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
}
 
/* Link hover effect */
.link {
  transition: color 150ms ease;
}
 
.link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

Persistent Navigation

Desktop Top Navigation (Persistent)
┌─────────────────────────────────────────────────────────────────┐
│ Logo │ Home │ Progress │ Settings │ Profile │      │ Search 🔍│
│ 120px│ 80px │  80px    │  80px    │  80px   │      │ 200px   │
└─────────────────────────────────────────────────────────────────┘

Navigation remains visible on scroll
Optional: Shrink header on scroll (64px → 48px)

Navigation Specifications (Desktop)

Property	Value	Notes
Header height	64px	Standard height
Shrunk header	48px	On scroll
Logo width	120px	Brand presence
Nav item spacing	32px	Between items
Search width	200px	Expandable
Profile button	40px	Circular

Full Spacing Scale

Token	Mobile	Tablet	Desktop	Notes
—space-xs	4px	4px	4px	-
—space-sm	8px	8px	8px	-
—space-md	12px	16px	16px	-
—space-lg	16px	24px	24px	-
—space-xl	24px	32px	32px	-
—space-2xl	32px	48px	48px	-
—space-3xl	48px	64px	64px	-
—space-4xl	-	-	96px	Hero sections
—space-5xl	-	-	128px	Major breaks

Modal Centering

Desktop Modal (Centered)
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│                         Backdrop                                │
│                    (rgba(0,0,0,0.7))                            │
│                                                                 │
│         ┌─────────────────────────────────────┐                 │
│         │     Modal Header              ✕     │                 │
│         ├─────────────────────────────────────┤                 │
│         │                                     │                 │
│         │         Modal Content               │                 │
│         │         (Max-width: 600px)          │                 │
│         │                                     │                 │
│         ├─────────────────────────────────────┤                 │
│         │      [Cancel]    [Confirm]          │                 │
│         └─────────────────────────────────────┘                 │
│                                                                 │
│                      Max-width: 600px                           │
│                      Max-height: 80vh                           │
└─────────────────────────────────────────────────────────────────┘

Modal Specifications (Desktop)

Property	Value	Notes
Position	Fixed, centered	Both axes
Max-width	600px	Comfortable reading
Max-height	80vh	Scroll if needed
Margin	Auto	Center alignment
Border radius	12px	Rounded corners
Backdrop	rgba(0,0,0,0.7)	Focus content
Animation	Fade + scale	250ms ease-out
Shadow	Large	Elevation

Max-Width Containers

/* Container system for desktop */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
 
/* Desktop container */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    --container-padding: 32px;
  }
}
 
/* Large desktop container */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
    --container-padding: 48px;
  }
}

---

5. Large Desktop Specifications (1440px+)

Wide Layouts

Large Desktop Layout (1440px+)
┌─────────────────────────────────────────────────────────────────────────────────┐
│                                                                                 │
│  ┌─────────────────────────────────────────────────────────────────────────┐    │
│  │ Logo │ Nav │ Nav │ Nav │ Nav │                    │ Search │ Profile    │    │
│  └─────────────────────────────────────────────────────────────────────────┘    │
│                                                                                 │
│  ┌─────────────────────────────────────────────────────────────────────────┐    │
│  │                                                                         │    │
│  │  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐     │    │
│  │  │ Day 1  │ │ Day 2  │ │ Day 3  │ │ Day 4  │ │ Day 5  │ │ Day 6  │     │    │
│  │  │        │ │        │ │        │ │        │ │        │ │        │     │    │
│  │  └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘     │    │
│  │                                                                         │    │
│  │  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐     │    │
│  │  │ Day 7  │ │ Day 8  │ │ Day 9  │ │ Day 10 │ │ Day 11 │ │ Day 12 │     │    │
│  │  └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘     │    │
│  │                                                                         │    │
│  └─────────────────────────────────────────────────────────────────────────┘    │
│                                                                                 │
│                           Max Width: 1400px                                     │
└─────────────────────────────────────────────────────────────────────────────────┘

Grid Specifications (Large Desktop)

Viewport	Columns	Column Gap	Row Gap	Notes
1440px - 1919px	5-6	24px	24px	Wide desktop
1920px+	6-8	24px	24px	Ultrawide

Increased Whitespace

Property	Desktop	Large Desktop	Increase
Section padding	64px	96px	+50%
Container padding	32px	48px	+50%
Card padding	24px	32px	+33%
Hero spacing	96px	128px	+33%
Between sections	64px	96px	+50%

Side Panels Possible

Large Desktop with Side Panel
┌────────┬──────────────────────────────────────────────────────┬────────┐
│        │                                                      │        │
│  Side  │                                                      │  Side  │
│  Panel │              Main Content Area                       │  Panel │
│  (ads/ │              (Max-width: 1400px)                     │  (info/│
│  nav)  │                                                      │  stats)│
│  200px │                                                      │  200px │
│        │                                                      │        │
└────────┴──────────────────────────────────────────────────────┴────────┘

Side panels: 200px max
Only visible at 1800px+
Collapsible on smaller viewports

Maximum Content Width

/* Large desktop container constraints */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  .container--wide {
    max-width: 1600px;
  }
  
  .container--full {
    max-width: none;
    padding-left: 48px;
    padding-right: 48px;
  }
}
 
/* Content width constraints for readability */
.content-readable {
  max-width: 75ch; /* Optimal reading width */
}
 
.content-wide {
  max-width: 100ch;
}

---

6. Grid System

12-Column Grid Specifications

12-Column Grid Visualization
┌─────────────────────────────────────────────────────────────────────────────┐
│                                                                             │
│ ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐  │
│ │ 1  ││ 2  ││ 3  ││ 4  ││ 5  ││ 6  ││ 7  ││ 8  ││ 9  ││ 10 ││ 11 ││ 12 │  │
│ └────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘└────┘  │
│                                                                             │
│ ┌──────────────────────────────────────────────────────────────────────┐    │
│ │                              col-12                                  │    │
│ └──────────────────────────────────────────────────────────────────────┘    │
│                                                                             │
│ ┌──────────────────────────────────────┐┌────────────────────────────────┐  │
│ │               col-6                  ││             col-6              │  │
│ └──────────────────────────────────────┘└────────────────────────────────┘  │
│                                                                             │
│ ┌──────────────────┐┌──────────────────┐┌──────────────────┐┌────────────┐  │
│ │      col-3       ││      col-3       ││      col-3       ││   col-3    │  │
│ └──────────────────┘└──────────────────┘└──────────────────┘└────────────┘  │
│                                                                             │
│ ┌────────┐┌────────┐┌────────┐┌────────┐┌────────┐┌────────┐┌────────┐      │
│ │ col-2  ││ col-2  ││ col-2  ││ col-2  ││ col-2  ││ col-2  ││ col-2  │      │
│ └────────┘└────────┘└────────┘└────────┘└────────┘└────────┘└────────┘      │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘

Grid Column Classes

Class	Width	Common Use
.col-1	8.33%	Small elements
.col-2	16.66%	Icon groups
.col-3	25%	4-column layouts
.col-4	33.33%	3-column layouts
.col-5	41.66%	Asymmetric layouts
.col-6	50%	2-column layouts
.col-7	58.33%	Content-heavy
.col-8	66.66%	Main content area
.col-9	75%	Primary content
.col-10	83.33%	Wide content
.col-11	91.66%	Near full-width
.col-12	100%	Full width

Grid Code

/* 12-Column Grid System */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}
 
/* Column spans */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
 
/* Responsive columns */
@media (max-width: 767px) {
  .col-sm-6 { grid-column: span 6; }
  .col-sm-12 { grid-column: span 12; }
}
 
@media (min-width: 768px) and (max-width: 1023px) {
  .col-md-4 { grid-column: span 4; }
  .col-md-6 { grid-column: span 6; }
}
 
@media (min-width: 1024px) {
  .col-lg-3 { grid-column: span 3; }
  .col-lg-4 { grid-column: span 4; }
}

Gutters at Each Breakpoint

Breakpoint	Gutter Size	Notes
Mobile (0-767px)	12px	Compact, touch-friendly
Tablet (768px-1023px)	16px	Balanced spacing
Desktop (1024px-1439px)	20-24px	Comfortable gaps
Large Desktop (1440px+)	24px	Premium feel

Gutter Code

:root {
  /* Gutter scale */
  --gutter-mobile: 12px;
  --gutter-tablet: 16px;
  --gutter-desktop: 20px;
  --gutter-large: 24px;
}
 
/* Responsive gutters */
.grid {
  gap: var(--gutter-mobile);
}
 
@media (min-width: 768px) {
  .grid {
    gap: var(--gutter-tablet);
  }
}
 
@media (min-width: 1024px) {
  .grid {
    gap: var(--gutter-desktop);
  }
}
 
@media (min-width: 1440px) {
  .grid {
    gap: var(--gutter-large);
  }
}

Container Max-Widths

Container Type	Mobile	Tablet	Desktop	Large Desktop
Default	100%	100%	1200px	1400px
Wide	100%	100%	1400px	1600px
Full	100%	100%	100%	100%
Narrow	100%	100%	800px	800px

Container Code

/* Container system */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
 
/* Container sizes */
.container--default {
  --container-max-width: 1400px;
}
 
.container--wide {
  --container-max-width: 1600px;
}
 
.container--narrow {
  --container-max-width: 800px;
}
 
/* Apply max-width on larger screens */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-max-width, 1400px);
  }
}

Margin/Padding Scales

:root {
  /* Spacing scale (8px base) */
  --space-0: 0;
  --space-1: 4px;    /* 0.25rem */
  --space-2: 8px;    /* 0.5rem */
  --space-3: 12px;   /* 0.75rem */
  --space-4: 16px;   /* 1rem */
  --space-5: 20px;   /* 1.25rem */
  --space-6: 24px;   /* 1.5rem */
  --space-8: 32px;   /* 2rem */
  --space-10: 40px;  /* 2.5rem */
  --space-12: 48px;  /* 3rem */
  --space-16: 64px;  /* 4rem */
  --space-20: 80px;  /* 5rem */
  --space-24: 96px;  /* 6rem */
  --space-32: 128px; /* 8rem */
}
 
/* Utility classes */
.m-4 { margin: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.ml-4 { margin-left: var(--space-4); }
.mr-4 { margin-right: var(--space-4); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
 
.p-4 { padding: var(--space-4); }
.pt-4 { padding-top: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.pl-4 { padding-left: var(--space-4); }
.pr-4 { padding-right: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

---

7. Component Behavior by Breakpoint

Navigation Transformations

Breakpoint	Pattern	Height	Behavior
Mobile	Bottom nav	56-64px	Fixed bottom, 4-5 items
Tablet	Bottom or side	56-72px	Context-dependent
Desktop	Top horizontal	64px	Persistent, hover states
Large Desktop	Top horizontal	64px	Same as desktop

Navigation Transformation Code

/* Mobile navigation */
@media (max-width: 767px) {
  .nav--mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .nav--desktop {
    display: none;
  }
}
 
/* Desktop navigation */
@media (min-width: 1024px) {
  .nav--mobile {
    display: none;
  }
  
  .nav--desktop {
    display: flex;
    position: sticky;
    top: 0;
    height: 64px;
    align-items: center;
    gap: 32px;
  }
}

Card Grid Changes

Breakpoint	Columns	Card Size	Gap
Mobile	1	Full width - 32px	12px
Tablet	2	50% - 16px	16px
Desktop (1024-1199)	3	33.33% - 20px	20px
Desktop (1200-1439)	4	25% - 24px	24px
Large Desktop	5-6	20% - 24px	24px

Card Grid Code

/* Card grid */
.card-grid {
  display: grid;
  gap: var(--card-gap);
}
 
/* Responsive columns */
@media (max-width: 767px) {
  .card-grid {
    grid-template-columns: 1fr;
    --card-gap: 12px;
  }
}
 
@media (min-width: 768px) and (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    --card-gap: 16px;
  }
}
 
@media (min-width: 1024px) and (max-width: 1199px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    --card-gap: 20px;
  }
}
 
@media (min-width: 1200px) and (max-width: 1439px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
    --card-gap: 24px;
  }
}
 
@media (min-width: 1440px) {
  .card-grid {
    grid-template-columns: repeat(5, 1fr);
    --card-gap: 24px;
  }
}
 
@media (min-width: 1920px) {
  .card-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

Button Sizing

Breakpoint	Primary	Secondary	Icon Only
Mobile	100% x 48px	48% x 44px	48x48px
Tablet	auto x 52px	auto x 48px	52x52px
Desktop	auto x 48px	auto x 44px	44x44px
Large Desktop	auto x 48px	auto x 44px	44x44px

Button Code

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  transition: all 150ms ease;
  cursor: pointer;
}
 
/* Mobile buttons */
@media (max-width: 767px) {
  .btn--primary {
    width: 100%;
    height: 48px;
    padding: 0 24px;
    font-size: 16px;
  }
  
  .btn--secondary {
    width: calc(50% - 8px);
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
  }
  
  .btn--icon {
    width: 48px;
    height: 48px;
    padding: 12px;
  }
}
 
/* Desktop buttons */
@media (min-width: 1024px) {
  .btn--primary {
    width: auto;
    height: 48px;
    padding: 0 24px;
  }
  
  .btn--secondary {
    width: auto;
    height: 44px;
    padding: 0 20px;
  }
  
  .btn--icon {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}

Typography Scaling

Element	Mobile	Tablet	Desktop	Large Desktop
H1	28px	32px	40px	48px
H2	24px	28px	32px	36px
H3	20px	24px	28px	32px
H4	18px	20px	22px	24px
Body	16px	16px	16px	16px
Body Large	18px	18px	18px	20px
Caption	12px	12px	12px	14px

Typography Code

/* Fluid typography using clamp() */
:root {
  /* Mobile-first with fluid scaling */
  --font-size-h1: clamp(1.75rem, 4vw + 1rem, 3rem);      /* 28px - 48px */
  --font-size-h2: clamp(1.5rem, 3vw + 0.75rem, 2.25rem); /* 24px - 36px */
  --font-size-h3: clamp(1.25rem, 2vw + 0.5rem, 2rem);    /* 20px - 32px */
  --font-size-h4: clamp(1.125rem, 1vw + 0.5rem, 1.5rem); /* 18px - 24px */
  --font-size-body: 1rem;                                 /* 16px fixed */
  --font-size-body-lg: clamp(1.125rem, 0.5vw + 1rem, 1.25rem); /* 18px - 20px */
}
 
/* Traditional breakpoint approach */
@media (min-width: 768px) {
  h1 { font-size: 32px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
}
 
@media (min-width: 1024px) {
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h3 { font-size: 28px; }
}
 
@media (min-width: 1440px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 32px; }
}

Progress Indicator Sizing

Breakpoint	Size	Stroke Width	Position
Mobile	48px diameter	4px	Below header
Tablet	56px diameter	5px	Below header
Desktop	64px diameter	6px	Side or below header
Large Desktop	72px diameter	6px	Side panel

Progress Indicator Code

/* Progress indicator */
.progress-indicator {
  position: relative;
  border-radius: 50%;
}
 
/* Mobile */
@media (max-width: 767px) {
  .progress-indicator {
    width: 48px;
    height: 48px;
  }
  
  .progress-indicator__circle {
    stroke-width: 4px;
  }
}
 
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .progress-indicator {
    width: 56px;
    height: 56px;
  }
  
  .progress-indicator__circle {
    stroke-width: 5px;
  }
}
 
/* Desktop */
@media (min-width: 1024px) {
  .progress-indicator {
    width: 64px;
    height: 64px;
  }
  
  .progress-indicator__circle {
    stroke-width: 6px;
  }
}
 
/* Large Desktop */
@media (min-width: 1440px) {
  .progress-indicator {
    width: 72px;
    height: 72px;
  }
}

Modal Sizing

Breakpoint	Width	Height	Position
Mobile	100%	100%	Full screen
Tablet	90%	auto, max 80%	Centered
Desktop	600px max	auto, max 80vh	Centered
Large Desktop	700px max	auto, max 80vh	Centered

Modal Code

/* Modal base */
.modal {
  position: fixed;
  background: var(--color-surface);
  border-radius: var(--modal-radius);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
}
 
/* Mobile modal (full screen) */
@media (max-width: 767px) {
  .modal {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  
  .modal__backdrop {
    display: none;
  }
}
 
/* Tablet modal */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 80%;
    border-radius: 12px;
  }
  
  .modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
  }
}
 
/* Desktop modal */
@media (min-width: 1024px) {
  .modal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    border-radius: 12px;
  }
}
 
/* Large desktop modal */
@media (min-width: 1440px) {
  .modal {
    max-width: 700px;
  }
}

---

8. Touch vs Mouse Considerations

Hover State Fallbacks

Element	Hover State	Touch Fallback	Implementation
Cards	Lift + shadow	Active state (press)	:hover + :active
Buttons	Brighten	Ripple effect	CSS + JS
Links	Underline	Highlight	:focus-visible
Images	Zoom	Tap to expand	Modal/lightbox
Navigation	Background	Active indicator	CSS classes

Hover Fallback Code

/* Hover with touch fallback */
.interactive-element {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
 
/* Hover for mouse users */
@media (hover: hover) and (pointer: fine) {
  .interactive-element:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}
 
/* Active state for touch */
.interactive-element:active {
  transform: scale(0.98);
}
 
/* Focus for keyboard navigation */
.interactive-element:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

Touch Gesture Zones

Gesture	Zone Size	Location	Purpose
Swipe left/right	100% width	Card/content area	Navigate experiences
Swipe up	100% width	List area	Load more
Pull to refresh	80px from top	Top of scroll	Refresh content
Edge swipe	20px from edge	Left edge	Open navigation
Double tap	44x44px	Image/media	Zoom/expand
Long press	44x44px	Cards/items	Context menu

Touch Zone Code

/* Swipe zones */
.swipe-zone {
  touch-action: pan-y; /* Allow vertical scroll */
  user-select: none;
}
 
/* Edge swipe detection area */
.edge-swipe-zone {
  position: fixed;
  left: 0;
  top: 0;
  width: 20px;
  height: 100vh;
  z-index: 50;
}
 
/* Pull to refresh area */
.pull-refresh-zone {
  position: absolute;
  top: -80px;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Right-Click Behaviors

Element	Right-Click Action	Notes
Experience cards	Context menu	Options: Start, Add to favorites, Share
Images	Context menu	Options: View full, Download, Share
Progress indicator	Context menu	Options: Jump to day, Reset progress
Links	Standard browser	Open in new tab, Copy link

Right-Click Code

// Custom context menu for experience cards
document.querySelectorAll('.experience-card').forEach(card => {
  card.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    showContextMenu(e, {
      items: [
        { label: 'Start Experience', action: () => startExperience(card) },
        { label: 'Add to Favorites', action: () => addToFavorites(card) },
        { label: 'Share', action: () => shareExperience(card) },
        { type: 'separator' },
        { label: 'View Details', action: () => viewDetails(card) }
      ]
    });
  });
});

Scroll Behaviors

Behavior	Mobile	Desktop	Implementation
Smooth scroll	Native	Native	scroll-behavior: smooth
Momentum scroll	Native	N/A	-webkit-overflow-scrolling: touch
Scroll snap	Optional	Optional	scroll-snap-type
Parallax	Limited	Full	transform + scroll event
Infinite scroll	Common	Optional	Intersection Observer

Scroll Code

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}
 
/* Momentum scrolling for iOS */
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
 
/* Scroll snap for carousels */
.scroll-snap-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}
 
.scroll-snap-item {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
}
 
/* Hide scrollbar but keep functionality */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
 
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

---

9. Viewport Meta & CSS

Recommended Viewport Meta Tag

<!-- Standard viewport meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
 
<!-- For standalone/PWA mode -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 
<!-- Complete viewport setup -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">

Viewport Meta Properties

Property	Value	Purpose
width	device-width	Match device width
initial-scale	1.0	No initial zoom
maximum-scale	5.0	Allow zoom for accessibility
minimum-scale	1.0	Prevent over-zooming out
user-scalable	yes	Allow user zoom
viewport-fit	cover	Handle notches/safe areas

CSS Breakpoint Media Queries

/* ============================================
   RESPONSIVE BREAKPOINTS
   Mobile-first approach
   ============================================ */
 
/* ----------------------------------------
   MOBILE (0 - 767px)
   Default styles - no media query needed
   ---------------------------------------- */
 
/* Base styles for mobile */
:root {
  /* Mobile spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  
  /* Mobile typography */
  --font-size-h1: 1.75rem;      /* 28px */
  --font-size-h2: 1.5rem;       /* 24px */
  --font-size-h3: 1.25rem;      /* 20px */
  --font-size-h4: 1.125rem;     /* 18px */
  --font-size-body: 1rem;       /* 16px */
  --font-size-caption: 0.75rem; /* 12px */
  
  /* Mobile grid */
  --grid-columns: 1;
  --grid-gap: 12px;
  
  /* Mobile container */
  --container-padding: 16px;
}
 
/* ----------------------------------------
   TABLET (768px - 1023px)
   ---------------------------------------- */
@media (min-width: 768px) {
  :root {
    /* Tablet spacing */
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Tablet typography */
    --font-size-h1: 2rem;    /* 32px */
    --font-size-h2: 1.75rem; /* 28px */
    --font-size-h3: 1.5rem;  /* 24px */
    
    /* Tablet grid */
    --grid-columns: 2;
    --grid-gap: 16px;
    
    /* Tablet container */
    --container-padding: 24px;
  }
}
 
/* ----------------------------------------
   DESKTOP (1024px - 1439px)
   ---------------------------------------- */
@media (min-width: 1024px) {
  :root {
    /* Desktop spacing */
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    
    /* Desktop typography */
    --font-size-h1: 2.5rem;  /* 40px */
    --font-size-h2: 2rem;    /* 32px */
    --font-size-h3: 1.75rem; /* 28px */
    --font-size-h4: 1.375rem; /* 22px */
    
    /* Desktop grid */
    --grid-columns: 3;
    --grid-gap: 20px;
    
    /* Desktop container */
    --container-padding: 32px;
    --container-max-width: 1200px;
  }
}
 
/* Desktop - Large (1200px - 1439px) */
@media (min-width: 1200px) {
  :root {
    --grid-columns: 4;
    --grid-gap: 24px;
    --container-max-width: 1200px;
  }
}
 
/* ----------------------------------------
   LARGE DESKTOP (1440px+)
   ---------------------------------------- */
@media (min-width: 1440px) {
  :root {
    /* Large desktop spacing */
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    
    /* Large desktop typography */
    --font-size-h1: 3rem;      /* 48px */
    --font-size-h2: 2.25rem;   /* 36px */
    --font-size-h3: 2rem;      /* 32px */
    --font-size-h4: 1.5rem;    /* 24px */
    --font-size-body-lg: 1.25rem; /* 20px */
    
    /* Large desktop grid */
    --grid-columns: 5;
    --grid-gap: 24px;
    
    /* Large desktop container */
    --container-padding: 48px;
    --container-max-width: 1400px;
  }
}
 
/* Large Desktop - Ultrawide (1920px+) */
@media (min-width: 1920px) {
  :root {
    --grid-columns: 6;
    --container-max-width: 1600px;
  }
}
 
/* ----------------------------------------
   ORIENTATION SPECIFIC
   ---------------------------------------- */
 
/* Landscape orientation on mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .hide-on-landscape {
    display: none;
  }
  
  .mobile-bottom-nav {
    height: 48px; /* Smaller in landscape */
  }
}
 
/* Portrait orientation on tablets */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  :root {
    --grid-columns: 2;
  }
}
 
/* ----------------------------------------
   HIGH-DPI / RETINA DISPLAYS
   ---------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Use higher resolution images */
  .hero-image {
    background-image: url('[email protected]');
  }
}
 
/* ----------------------------------------
   REDUCED MOTION
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}
 
/* ----------------------------------------
   DARK MODE (if needed)
   ---------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0a0a0f;
    --color-surface: #14141a;
    --color-text: #ffffff;
    --color-text-secondary: #a0a0b0;
  }
}
 
/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white;
    color: black;
  }
}

Container Query Suggestions

/* ============================================
   CONTAINER QUERIES
   Component-level responsiveness
   ============================================ */
 
/* Define container contexts */
.card-container {
  container-type: inline-size;
  container-name: card;
}
 
.sidebar-container {
  container-type: inline-size;
  container-name: sidebar;
}
 
/* Card component responsive to its container */
@container card (max-width: 300px) {
  .experience-card {
    flex-direction: column;
  }
  
  .experience-card__image {
    width: 100%;
    height: 150px;
  }
  
  .experience-card__title {
    font-size: 16px;
  }
}
 
@container card (min-width: 301px) and (max-width: 500px) {
  .experience-card {
    flex-direction: row;
  }
  
  .experience-card__image {
    width: 120px;
    height: 100%;
  }
  
  .experience-card__title {
    font-size: 18px;
  }
}
 
@container card (min-width: 501px) {
  .experience-card {
    flex-direction: column;
  }
  
  .experience-card__image {
    width: 100%;
    height: 200px;
  }
  
  .experience-card__title {
    font-size: 20px;
  }
}
 
/* Sidebar responsive behavior */
@container sidebar (max-width: 200px) {
  .sidebar-nav__label {
    display: none;
  }
  
  .sidebar-nav__icon {
    margin: 0;
  }
}
 
@container sidebar (min-width: 201px) {
  .sidebar-nav__label {
    display: inline;
  }
}

---

10. Device-Specific Notes

iPhone SE Considerations

Property	Value	Notes
Viewport width	375px	Smallest modern iPhone
Viewport height	667px	Limited vertical space
Safe area top	20px	No notch
Safe area bottom	0px	Home button
Touch targets	Critical	Must be 44px minimum
Font sizes	Minimum 14px	Readable at this size

iPhone SE Code

/* iPhone SE specific adjustments */
@media (max-width: 375px) {
  :root {
    --font-size-h1: 1.5rem;    /* 24px */
    --font-size-h2: 1.25rem;   /* 20px */
    --font-size-h3: 1.125rem;  /* 18px */
    --space-lg: 12px;
    --space-xl: 16px;
  }
  
  .experience-card {
    padding: 12px;
  }
  
  .mobile-bottom-nav {
    height: 52px;
  }
  
  .mobile-bottom-nav__label {
    font-size: 10px;
  }
}

iPad Landscape/Portrait

Orientation	Width	Height	Grid Columns	Notes
Portrait	768px	1024px	2	Standard tablet
Landscape	1024px	768px	3	Desktop-like

iPad Code

/* iPad portrait */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .nav--tablet {
    display: flex;
    position: fixed;
    bottom: 0;
    height: 64px;
  }
}
 
/* iPad landscape */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .nav--desktop {
    display: flex;
    position: sticky;
    top: 0;
  }
  
  .nav--tablet {
    display: none;
  }
}
 
/* iPad Pro 12.9" */
@media (min-width: 1024px) and (min-height: 1366px) {
  :root {
    --font-size-h1: 2.75rem;
    --font-size-h2: 2.25rem;
  }
}

Common Android Sizes

Device	Width	Height	Density	Notes
Small phones	360px	640px	1.0-2.0	Moto G, etc.
Medium phones	393px	786px	2.5-3.0	Pixel 5, etc.
Large phones	412px	915px	3.0-3.5	Galaxy S21+
XL phones	448px	997px	3.5+	Galaxy S21 Ultra
Small tablets	600px	960px	1.0-1.5	Nexus 7
Large tablets	800px	1280px	1.5-2.0	Galaxy Tab

Android Code

/* Small Android phones */
@media (max-width: 360px) {
  :root {
    --font-size-h1: 1.5rem;
    --container-padding: 12px;
  }
}
 
/* Medium Android phones (most common) */
@media (min-width: 361px) and (max-width: 414px) {
  /* Default mobile styles apply */
}
 
/* Large Android phones */
@media (min-width: 415px) and (max-width: 599px) {
  :root {
    --font-size-h1: 1.875rem; /* 30px */
    --grid-columns: 2;
  }
  
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* Android tablets (small) */
@media (min-width: 600px) and (max-width: 767px) {
  :root {
    --grid-columns: 2;
    --container-padding: 20px;
  }
  
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Notch/Safe Area Handling

/* ============================================
   SAFE AREA INSETS (Notch/Dynamic Island)
   ============================================ */
 
/* iOS safe area support */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-header {
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom));
  }
  
  .modal--fullscreen {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
 
/* Fallback for non-notch devices */
@supports not (padding-top: env(safe-area-inset-top)) {
  .app-header {
    height: 56px;
  }
  
  .mobile-bottom-nav {
    height: 56px;
  }
}
 
/* Landscape safe areas */
@media (orientation: landscape) {
  @supports (padding-left: env(safe-area-inset-left)) {
    .app-content {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

Safe Area Visual Reference

Safe Area Insets Visualization
┌─────────────────────────────────────┐
│     safe-area-inset-top             │
│  ┌─────────────────────────────┐    │
│  │                             │    │
│  │                             │    │
│s │                             │ s  │
│a │      USABLE CONTENT         │ a  │
│f │                             │ f  │
│e │                             │ e  │
│- │                             │ -  │
│a │                             │ a  │
│r │                             │ r  │
│e │                             │ e  │
│a │                             │ a  │
│  │                             │    │
│  └─────────────────────────────┘    │
│     safe-area-inset-bottom          │
└─────────────────────────────────────┘

Notch area (top): env(safe-area-inset-top)
Home indicator (bottom): env(safe-area-inset-bottom)
Side areas (landscape): env(safe-area-inset-left/right)

Device Detection (CSS Only)

/* ============================================
   DEVICE-SPECIFIC DETECTION
   ============================================ */
 
/* iOS devices */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  .ios-only {
    display: block;
  }
  
  /* Fix for iOS momentum scrolling */
  .scroll-container {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Fix for iOS 100vh issue */
  .full-height {
    height: -webkit-fill-available;
  }
}
 
/* Non-iOS devices */
@supports not (-webkit-touch-callout: none) {
  .ios-only {
    display: none;
  }
}
 
/* Touch devices */
@media (hover: none) and (pointer: coarse) {
  .touch-device {
    /* Touch-specific styles */
  }
  
  /* Remove hover effects */
  .no-hover-on-touch:hover {
    transform: none;
    box-shadow: none;
  }
}
 
/* Mouse/trackpad devices */
@media (hover: hover) and (pointer: fine) {
  .mouse-device {
    /* Mouse-specific styles */
  }
  
  /* Enable hover effects */
  .hover-enabled:hover {
    transform: translateY(-2px);
  }
}
 
/* Stylus devices */
@media (pointer: fine) and (hover: none) {
  .stylus-device {
    /* Stylus-specific styles */
  }
}

---

Quick Reference Tables

Breakpoint Summary

Breakpoint	Min	Max	Grid	Container
Mobile	0	767px	1 col	100% - 32px
Tablet	768px	1023px	2 col	100% - 48px
Desktop	1024px	1439px	3-4 col	1200px max
Large Desktop	1440px	∞	5-6 col	1400px max

Touch Target Summary

Element	Mobile	Tablet	Desktop
Primary button	48x48px	52x52px	48x48px
Secondary button	44x44px	48x48px	44x44px
Navigation item	48x48px	56x56px	44x44px
Card	Full width	50% - 16px	25% - 24px
Close button	48x48px	52x52px	44x44px

Typography Summary

Element	Mobile	Tablet	Desktop	Large
H1	28px	32px	40px	48px
H2	24px	28px	32px	36px
H3	20px	24px	28px	32px
Body	16px	16px	16px	16px
Caption	12px	12px	12px	14px

Spacing Summary

Token	Mobile	Tablet	Desktop	Large
xs	4px	4px	4px	4px
sm	8px	8px	8px	8px
md	12px	16px	16px	16px
lg	16px	24px	24px	24px
xl	24px	32px	32px	32px
2xl	32px	48px	48px	48px
3xl	48px	64px	64px	64px

---

Implementation Checklist

Mobile-First Development

• Start with mobile styles (no media query)
• Use min-width media queries for larger screens
• Test touch targets at 44x44px minimum
• Implement safe area insets for notched devices
• Use relative units (rem, %) for scalability

Responsive Images

• Use srcset for responsive images
• Implement lazy loading
• Provide appropriate sizes for each breakpoint
• Use WebP format with fallbacks

Performance

• Minimize layout shifts (CLS)
• Use content-visibility for off-screen content
• Implement will-change for animated elements
• Test on actual devices, not just emulators

Accessibility

• Maintain 4.5:1 contrast ratio minimum
• Support zoom up to 200%
• Implement prefers-reduced-motion
• Test with screen readers
• Ensure keyboard navigation works

---

File Location

Document Path: /mnt/okcomputer/output/responsive-breakpoints.md

---

This specification provides comprehensive responsive breakpoint guidelines for the “40 Days of Existential Threats” interactive experience collection. All pixel values, percentages, and code examples are ready for implementation.