What are CSS container queries and how do they differ from media queries?

CSS Container Queries (CSS Containment Level 3) allow you to apply styles based on the size of a parent container rather than the viewport. Declare a containment context: .card-container { container-type: inline-size; }. Then query it: @container (min-width: 400px) { .card { ... } }. This solves a fundamental problem with media queries: a component like a card should adapt to its own container's width, not the viewport — the same card might be in a sidebar (narrow) and in a main column (wide) simultaneously. Container queries enable truly reusable, self-contained responsive components that are container-aware rather than viewport-aware.