/* Numeri che contano e si allargano */
:root {
  --sfondo: #0b3b39;
  --testo: #f6f7f3;
  --numero: #ff8a3d;
  --scia: rgba(134, 207, 196, 0.35);   /* l'ombra spostata che cresce con la larghezza */
}

html,
body {
  margin: 0;
}
body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.intro {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 0 6vw 10vh;
}
.intro h1 {
  margin: 0;
  font-size: clamp(44px, 7vw, 110px);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.intro p {
  margin: 2vh 0 0;
  font-size: clamp(16px, 1.3vw, 20px);
  opacity: 0.7;
}

.numeri {
  list-style: none;
  margin: 0;
  padding: 0 6vw;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3vw;
}
.numeri li {
  border-top: 2px solid color-mix(in srgb, var(--testo) 70%, transparent);
  padding-top: 20px;
}
.numero {
  display: block;
  font-size: clamp(60px, 8vw, 150px);
  font-weight: 860;
  font-stretch: calc(var(--w, 75) * 1%);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--numero);
  text-shadow: calc(var(--scarto, 0) * 1px) calc(var(--scarto, 0) * 0.6px) 0 var(--scia);
}
.cosa {
  display: block;
  margin-top: 14px;
  max-width: 22ch;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.35;
  opacity: 0.8;
}
.coda {
  height: 80vh;
}

@media (max-width: 760px) {
  .numeri {
    grid-template-columns: 1fr 1fr;
    row-gap: 48px;
  }
}