/* ============================================================
   Riquadro dati - trascrizione di .concorso-facts e
   .concorso-fact del blocco <style> delle pagine di concorso
   del riferimento.

   I selettori raddoppiano la classe del blocco
   (.wp-block-apitrentine-dati.concorso-facts) invece di
   scoparsi su .article: cosi' valgono anche nell'editor, dove
   .article non esiste, e battono comunque
   .is-layout-flow > * { margin-block: 0 } di core, che ha
   specificita' 0,1,1.
   ============================================================ */

/* Ogni regola parte da :root. Senza, .wp-block-apitrentine-X.<classe> pareggia
   la specificita' di .article .article-body <elemento> in article.css - due
   classi e un elemento da tutte e due le parti - e vince chi carica dopo, che
   e' il foglio del tema. :root aggiunge la classe che serve, ed e' anche
   quello che core usa per le sue regole globali. */

:root .wp-block-apitrentine-dati.concorso-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	/* il bordo fra le caselle e' il fondo che traspare dai gap di 1px */
	background: var(--wp--preset--color--border-line);
	border: 1px solid var(--wp--preset--color--border-line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	margin: 32px 0;
}

:root .wp-block-apitrentine-dati.concorso-facts .concorso-fact {
	background: var(--wp--preset--color--white);
	padding: 18px 22px;
}

:root .wp-block-apitrentine-dati.concorso-facts .concorso-fact strong {
	display: block;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wp--preset--color--amber);
	margin-bottom: 6px;
}

:root .wp-block-apitrentine-dati.concorso-facts .concorso-fact span {
	font-size: 1.05rem;
	color: var(--wp--preset--color--text-base);
}

@media (max-width: 860px) {
	:root .wp-block-apitrentine-dati.concorso-facts {
		grid-template-columns: 1fr;
	}
}