Container Query Card Responsive

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

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card-image { flex: 0 0 200px; }
}

@container card (min-width: 600px) {
  .card { gap: 2rem; }
  .card-title { font-size: 1.5rem; }
}