[ervine]

Old paradigm (media queries): You make layout changes based on the width / height of the viewport (browser).

New paradigm (container queries): You make layout changes based on the width / height of the containing element.

This lets you layout a component so that it looks good in any sized container. Picture a component that might be in the main section or in the sidebar - you can now just style directly based on width of the container instead of having to know the total width of sidebar + main section and do the calculation using viewport width.

[kevindamm]

Agreed, but to add to this:

media queries are still useful, and since a media query may hide/remove entire containers in the view then the remaining containers may have widths that are no longer a simple proportion of the viewport width (or other property being selected for).

So container queries can also enhance styles with media queries, not just replace them.