Container Queries: A Card That Adapts to Its Container, Not the Viewport (No JavaScript)

The exact same card markup and CSS rules, rendered inside two containers of different widths - one narrow, one wide - and it reflows from a stacked layout to a side-by-side one purely because of container-type: inline-size and an @container query, with zero media queries and zero JavaScript. This is what makes a component truly reusable in a sidebar, a grid or a modal, since it responds to its own box instead of the browser window.