CSS Container Queries

/* Define a container */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Short syntax */
.card-container {
  container: card / inline-size;
}

/* Container query */
@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
  
  .card-image {
    width: 40%;
  }
  
  .card-content {
    width: 60%;
    padding: 24px;
  }
}

@container card (max-width: 399px) {
  .card {
    display: block;
  }
  
  .card-image {
    width: 100%;
    height: 200px;
  }
}

/* Container query units */
.card-title {
  font-size: clamp(1rem, 5cqi, 2rem); /* container query inline */
}

/* Style queries (experimental) */
@container style(--theme: dark) {
  .card {
    background: #1a1a2e;
  }
}