Container queries adoption

Why

Media queries tie layout to the viewport. Container queries let a component respond to its own available width, making it truly reusable across any parent context.

How

1. Define a containment context — set container-type: inline-size on the parent.
2. Name the container — use container-name for scoped queries.
3. Write container queries — @container (min-width: 400px) replaces @media.
4. Audit existing media queries — migrate component-level breakpoints first; leave page-layout queries as-is.

Gotchas

• Container queries cannot size the container itself — avoid circular dependencies.
• Height queries (block-size) are still limited in some browsers.
• Containment clips overflow by default; add overflow: visible if needed.