Container queries 🍹 HTMLcat

Container Queries allow you to apply styles to an element based on the size of its containing element, rather than the viewport. This enables more modular and responsive designs.

.container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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