Container size queries
A component often cares about the space it receives, not the viewport. Container queries let the same card adapt inside a sidebar, grid, or full-width region.
.card-wrapper {
container-type: inline-size;
}
@container (width > 30rem) {
.card {
grid-template-columns: 12rem 1fr;
}
} Put containment on a wrapper when querying the component itself would create a circular dependency.