.card {
  display: inline-flex;
  justify-content: stretch;
  align-items: center;
  flex-direction: column;
  width: 350px;
  max-width: calc(100% - 20px - 20px);
  margin: 20px;
  background: var(--background);
  border-radius: var(--rounded);
  overflow: hidden;
  box-shadow: var(--shadow);
  vertical-align: top;
}

.card[data-style=small] {
  width: 250px;
}

.card-image img {
  aspect-ratio: 3/2;
  object-fit: cover;
  width: 100%;
}

.card-text {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
  padding: 20px;
}

.card-text > * {
  margin: 0 !important;
}

.card-title {
  font-family: var(--heading);
  font-weight: var(--semi-bold);
}

.card-subtitle {
  margin-top: -10px !important;
  font-style: italic;
}

/* A row of cards that shares the available width rather than using fixed
   widths. Cards at the default 350px + margins need ~1170px for three, which
   a laptop or a non-maximised window does not have, so they used to wrap.
   Letting them flex means three fit wherever there is room and they wrap
   gracefully when there is not. Stretching also evens up their heights. */
.cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

.cards-row .card {
  flex: 1 1 240px;
  width: auto;
  max-width: 340px;
  margin: 0;
}

/*# sourceMappingURL=card.css.map */