Container queries

An @media query asks about the width of the screen. But the same card can appear in a narrow column and in a wide area on the very same page, and the screen width can't tell the difference.

@container asks about the width of the container instead. You declare an element a container with container-type: inline-size, then write rules that apply based on its own width.

This is a big shift, because the component no longer depends on where it sits: you write it once and drop it anywhere you like.