/* 1. 컨테이너 선언 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 2. 컨테이너 크기에 따른 스타일 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

/* 미디어 쿼리: 뷰포트가 768px 이하일 때 */
@media (max-width: 768px) {
  .card { flex-direction: column; }
}

/* 컨테이너 쿼리: .card의 부모가 400px 이하일 때 */
@container (max-width: 400px) {
  .card { flex-direction: column; }
}

.card-title {
  font-size: clamp(1rem, 3cqi, 1.5rem); /* cqi = container query inline */
}