/* L3 — Contatori: la griglia dei quattro numeri.
 *
 * Le regole delle celle sono le stesse che il tema usa per le griglie di
 * numeri scritte a mano nelle pagine. Qui ci sono lo stesso, con i valori di
 * ripiego: su un altro sito quelle regole non ci sono, e senza queste i
 * numeri uscirebbero grandi come il testo normale, cioe' non si vedrebbero.
 */

:root{
  --l3n-border:   var(--wp--preset--color--border, #26282a);
  --l3n-contrast: var(--wp--preset--color--contrast, #d8d1c2);
  --l3n-dim:      var(--wp--preset--color--dim, #7b7466);
  --l3n-mono:     var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  --l3n-wrap:     var(--l3-wrap, 1360px);
  --l3n-sp-40:    var(--wp--preset--spacing--40, 44px);
}

[data-l3-tool="counters"]{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--l3n-sp-40);
  max-width:var(--l3n-wrap); margin-inline:auto;
  border-top:1px solid var(--l3n-border); padding-top:28px;
}
@media (max-width:760px){ [data-l3-tool="counters"]{ grid-template-columns:repeat(2,1fr); } }

.l3-metric__value{ font-size:40px; font-weight:400; letter-spacing:-.04em; color:var(--l3n-contrast); display:block; line-height:1.1; }
.l3-metric__label{ font-family:var(--l3n-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--l3n-dim); display:block; margin-top:8px; }