/* Typography is driven entirely by the section/block typography settings
   (the `title*` / `body*` classes). No font-family / font-size / font-weight
   below except the value's size, which is its own setting: those selectors
   would tie with the typography classes on specificity and win on source
   order, making the settings inert. */

.metric-cards {
  background-color: rgb(var(--color-background));
}

.metric-cards__heading {
  margin: 0;
  color: rgb(var(--color-text));
}

.metric-cards__subheading {
  max-width: 900px;
  margin: 16px auto 0;
  color: rgb(var(--color-light-text));
}

.metric-cards__footnote {
  margin: 28px 0 0;
  color: rgb(var(--color-light-text));
}

/* ---- cards ---- */
.metric-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--metric-columns, 3), minmax(0, 1fr));
  gap: var(--metric-card-gap, 24px);
  margin-block-start: 48px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--metric-card-background, #ffffff);
  border: 1px solid var(--metric-card-border-color, #ececec);
  border-radius: var(--metric-card-radius, 0);
}

/* full width so the text_align setting has something to align within */
.metric-card__label,
.metric-card__value,
.metric-card__caption {
  display: block;
  width: 100%;
}

.metric-card__label {
  letter-spacing: var(--metric-label-letter-spacing, 1px);
  text-transform: uppercase;
  color: rgb(var(--color-text));
}

.metric-card__value {
  /* the theme has no Cormorant scale at this size, so the size is its own
     setting; family and weight still come from the typography class */
  margin: 20px 0 0;
  font-size: var(--metric-value-font-size, 32px);
  color: rgb(var(--color-text));
}

.metric-card__caption {
  margin-block-start: 14px;
  color: rgb(var(--color-light-text));
}

/* ---- responsive ---- */
@media (max-width: 959px) {
  .metric-cards__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-block-start: 32px;
  }

  .metric-cards__subheading {
    margin-block-start: 12px;
  }
}