Responsive Layout

Responsive layout is intrinsic reflow plus content-led breakpoints/container queries, not named-device CSS.

The decision order

1. Start mobile-first with Grid/Flex intrinsic sizing (minmax, auto-fit, clamp, %/fr).
2. Add breakpoints only where content breaks; reusable components use container queries.
3. Verify minimum supported viewport, 200–400% zoom, long/translated content, narrow embeds, and wide views without overflow or collapse.

Preserve hierarchy under pressure

Start with non-disappearing content, reading order, and narrowest real container. Choose stack/reorder/progressive reveal/rail from observed pressure; test long content, locale, zoom, and embeds before calling it responsive.

Non-negotiables