:root {
  --card-list-flex-direction: row;
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --card-list-flex-direction: column;
  }
}

.card-list {
  display: flex;
  flex-direction: var(--card-list-flex-direction);
  gap: var(--layout-gap-basis);
}

.card-list > * {
  flex: 1 1 var(--card-flex-basis);
}