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

.cards-container {
  padding: 0.25rem 0.5rem;
}

.card-item {
  grid-column: span 12 / span 12;
}

.tall {
  grid-row: span 1 / span 1;
}

@container card-viz (min-width: 640px) {
  .card-item {
    grid-column: span 6 / span 6;
  }
}

@container card-viz (min-width: 768px) {
  .cards-container {
    padding: 1rem 2rem;
  }

  .card-item {
    grid-column: span 4 / span 4;
  }

  .landscape {
    grid-column: span 8 / span 8;
  }

  .tall {
    grid-row: span 2 / span 2;
  }
}
@container card-viz (min-width: 1024px) {
  .card-item {
    grid-column: span 3 / span 3;
  }
  .landscape {
    grid-column: span 6 / span 6;
  }
}