Breakpoints

A breakpoint tier (--grid-cols--md: 3) applies when the nearest inline-size container is at least as wide as a threshold in rem. The thresholds are the same widths as the layout tokens (--layout-md is 48rem), so md means "an md band fits here".

rem resolves against the root font in every container, so siblings set in different type flip at the same width, and a web font loading late never moves a threshold. The thresholds still scale with the reader's font size setting and zoom.

Which container answers

The reset makes html an inline-size container, so markup outside any other container responds to the page, however narrow its own section or main is. Inside a layout, each band child is a container, so tiers inside a band follow the band. Mark anything else (a card, a sidebar, a slot) with the container switch (data-ui="container") and the tiers inside it follow its width.

Two rules follow from how container queries work:

• An element never queries itself. A container's own tiers read the container above it.
• A container cannot size itself from its content, so give it a definite or stretched width.

Tiers are mobile-first: --display: none; --display--md: flex hides below md and shows from md up. Color utilities take breakpoint tiers too, and a state still beats a breakpoint (--bg--md: black; --bg--hover: gray is gray on hover at any width).