Container queries let components style themselves based on their parent’s size instead of the viewport. Set container-type: inline-size on a parent, then use @container (min-width: 30rem) inside the child’s styles.
The implication for design systems is large: a card component can be ‘wide’ inside a sidebar layout and ‘tall’ inside a grid without prop drilling. Browser support is now solid across Chrome, Firefox, and Safari.
Pair them with container-name for nested layouts where you want to target a specific ancestor. The DevTools panel in Chrome highlights container boundaries to help debug.