:root {
  --cluster-card-list-column-count: 2;
  --cluster-card-list-row-count: 3;
  --cluster-card-list-grid-auto-flow: column;
  --cluster-card-list-gap: calc(var(--layout-gap-basis) * 0.66);
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --cluster-card-list-column-count: 1;
    --cluster-card-list-row-count: auto;
    --cluster-card-list-gap: var(--layout-gap-basis);
    --cluster-card-list-grid-auto-flow: row;
  }
}

.cluster-card-list {
  display: grid;
  grid-template-columns: repeat(var(--cluster-card-list-column-count), 1fr);
  grid-template-rows: repeat(var(--cluster-card-list-row-count), auto);
  gap: var(--cluster-card-list-gap);
  grid-auto-flow: var(--cluster-card-list-grid-auto-flow);
  align-items: stretch;
}