CSS Container Queries

Container queries changed everything for component design.

Before: Components would break at arbitrary viewport breakpoints

@media (min-width: 768px) {
  .card { flex-direction: row; }
}

After: Components adapt to their container

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Now my components work anywhere—I can stick a card in a sidebar, a main column, or a modal, and it adapts automatically.