.stat-cards {
  display: grid;
  gap: 1.5rem;
}
@supports (inline-size: min(14rem, 100%)) {
  .stat-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  }
}

.stat-card {
  background-color: var(--spruce-base-color-surface);
  border: var(--spruce-border-width-base) solid var(--spruce-base-color-border);
  border-radius: var(--spruce-border-radius-lg);
  overflow: hidden;
  padding: 1.5rem 1.5rem 0;
}
.stat-card > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.stat-card > * + * {
  margin-block-start: 0.25rem;
}
.stat-card__label {
  color: var(--spruce-base-color-muted);
  font-family: inherit;
  font-size: var(--spruce-font-size-sm);
  font-weight: 600;
  margin: 0;
}
.stat-card__value {
  color: var(--spruce-base-color-heading);
  font-family: var(--spruce-font-family-heading);
  font-size: clamp(1.66015625rem, 2vw + 1rem, 1.953125rem);
  font-weight: 700;
  line-height: 1.1;
}
.stat-card__change {
  font-size: var(--spruce-font-size-sm);
  font-weight: 700;
}
.stat-card__change--up {
  color: var(--spruce-alert-color-success);
}
.stat-card__change--down {
  color: var(--spruce-alert-color-danger);
}
.stat-card__period {
  color: var(--spruce-base-color-muted);
  font-weight: 400;
}
.stat-card__chart {
  block-size: 3rem;
  inline-size: calc(100% + 1.5rem * 2);
  margin-block-start: 0.5rem;
  margin-inline: calc(1.5rem * -1);
  stroke: var(--spruce-base-color-primary);
  stroke-width: 2;
}