/* ==========================================================================
   Contatore (widget "counter" di Elementor). Numero grande sopra, didascalia sotto.
   Il valore finale e' gia' scritto nell'HTML (utile senza JS e a chi legge la pagina):
   counter.js lo riporta a zero e lo fa contare quando entra nello schermo.
   Nel DOM la didascalia viene prima del numero, come sul vivo: column-reverse li inverte.
   Misure di default del widget Elementor; font e colori li decide la sezione che lo usa.
   ========================================================================== */
.counter {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: stretch;
}

.counter__number {
  display: flex;
  flex: 1;
  font-size: 69px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* prefisso e suffisso si prendono lo spazio libero: il numero resta centrato sotto la didascalia */
.counter__prefix {
  flex-grow: 1;
  text-align: end;
  white-space: pre-wrap;
}

.counter__value {
  flex-grow: 0;
}

.counter__suffix {
  flex-grow: 1;
  text-align: start;
  white-space: pre-wrap;
}

.counter__title {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 2.5;
}