Flexbo saysContainer queries style an element based on its container’s size, not the viewport.
Media queries ask "how big is the screen?"; container queries ask "how big is my parent?". Mark a container with container-type:inline-size, then write @container (min-width: 400px). A card reflows based on the column it's dropped into — true component-level responsiveness.
Power-ups you unlock
Style by container size, not viewport
container-type:inline-size on the parent
@container (min-width: …){ … }
Enables truly reusable responsive components
The Float Phantom attacks — common mistakes
Forgetting container-type on the parent
Querying the element instead of its container
Assuming universal old-browser support
Boss battleMake a card switch to horizontal layout when its container is wider than 400px.