.cards {
  display: grid;
  gap: 1rem;
}

.cards--carousel {
  display: flex;
  align-items: center;

  width: 100%;
  overflow: scroll;

  scroll-snap-type: x mandatory;
}

.cards--carousel .card {
  min-width: 100%;
  scroll-snap-align: center;
}

.card {
  padding: 1rem;
  background-color: var(--color-card-bg);
}

.card--rounded {
  border-radius: 1rem;
}

.card--has-profile .card__content,
.card--has-profile .card__preview {
  padding-left: 0.5rem;
}

.card__heading {
  font-size: 1.5rem;
}

.card__subheading {
  font-style: italic;
}

.card__preview {
  overflow: clip;

  --line-clamp: 2;
  line-clamp: var(--line-clamp);
  /* NOTE: Vendor extensions for legacy compatibility below */
  -webkit-line-clamp: var(--line-clamp);
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

@media (width >=48em) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards--carousel .card {
    min-width: 75%;
  }
}

@media (width >=64em) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .cards--carousel .card {
    min-width: 33%;
  }
}