/* TODO: snap for smaller screens (optional?) */
.metrics {
  --pad: 16px;
  --block: 45px;
  --inline: 22px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: calc(2 * var(--pad));
  overflow-x: auto;
  margin-block: var(--block);
  padding-inline: var(--pad);
}

@media screen and (min-width: 1024px) {
  .metrics {
    justify-content: center;
  }
}

.metric {
  --radius: 24px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  margin-block-end: 16px; /* scrollbar */
  padding-block: var(--block);
  padding-inline: var(--inline);
  border-radius: var(--radius);
  background-image: var(--background);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--white, white);
  width: 350px;
}

.metric__overlay {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: hsla(0deg, 0%, 0%, 33%);
  border-radius: var(--radius);
}

.metric__top-label {
  z-index: 0; /* same layer as overlay */
  font-size: calc(22 / 16 * 1rem);
  letter-spacing: calc(-1 * 0.44 / 16 * 1rem);
  line-height: calc(29.04 / 16);
  white-space: nowrap;
}

.metric__bottom-label {
  z-index: 0; /* same layer as overlay */
  font-size: calc(22 / 16 * 1rem);
  letter-spacing: -calc(0.44 / 16 * 1rem);
  line-height: calc(29.04 / 16 * 1rem);
  white-space: nowrap;
}

.metric__value {
  z-index: 0; /* same layer as overlay */
  margin-block-start: 8px;
  margin-block-end: 11px;
  font-size: calc(60 / 16 * 1rem);
  line-height: calc(44.65 / 60);
}