Media queries react to the viewport. Container queries react to the parent element’s size. This is a revolution for component-based design.
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: flex; flex-direction: row; }
}
Why? Now your card component can be placed in a sidebar or a main feed and it will style itself correctly based on where it sits, not how big the screen is.