- Grids of cards: 1 column, then 2 from
md:, then 3 fromlg:. - Two-pane pages (results and map, listing and contact form): stacked on phones, side by side from
lg:. - Navigation: plan what collapses on phones. Don't just shrink the desktop layout.
✓ Do
Check every mockup at 390, 768 and 1280px: Claude does it with bun run check:layout and looks at screenshots (bun run screenshot /route --width 390).
✕ Don't
Hide content on phones to make it fit. Reorder or collapse it instead.