What you need to know
A card may appear in a narrow sidebar on one page and a wide grid on another. A media query sees the screen, but a container query can adapt the component to the actual space around it.
How to apply it
Declare a containment context on the wrapper with container-type: inline-size, then use @container for changes that belong to that component. Keep a sensible base style for browsers or contexts without a query.
Common mistake to avoid
Do not add a container query when a small flexible layout already works. Use it when the same component genuinely appears in different container widths.