For decades, we designed based on the viewport. But components should be responsive based on their container.
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { display: flex; }
}
This allows a component to look different depending on whether it’s in a narrow sidebar or a wide main content area. A total game changer for design systems.