CSS Container Query ジェネレーター

/* コンテナの設定 */
.card {
  container-name: card;
  container-type: inline-size;
}

/* コンテナクエリ */
@container card (min-width: 400px) {
  .card {
    font-size: 1.2rem;
    padding: 1.5rem;
  }
}

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