/*
 * Testo e fatti: la colonna di testo con l'elenco dei dati concreti a fianco,
 * su due colonne. Sotto i 60rem diventa una colonna sola.
 */

.cn-testo-fatti {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

@media (min-width: 60rem) {
	.cn-testo-fatti {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	}
}

.cn-testo-fatti__testo p {
	color: var(--cn-inchiostro-tenue);
	max-width: 54ch;
}

.cn-testo-fatti__testo p:last-child {
	margin-bottom: 0;
}

/* I fatti stanno su due colonne anche dentro la loro metà: sono voci corte, in
   colonna singola resterebbe una lista lunga e magra. */
.cn-testo-fatti__elenco {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.2rem, 3vw, 2rem);
	margin: 0;
	padding: clamp(1.6rem, 3vw, 2.4rem) 0 0;
	list-style: none;
	border-top: var(--cn-filetto) solid var(--cn-bordo);
	font-size: var(--cn-corpo-piccolo);
	color: var(--cn-inchiostro-tenue);
}

.cn-testo-fatti__elenco strong {
	display: block;
	font-family: var(--cn-font-testo);
	font-weight: 400;
	font-size: var(--cn-occhiello-corpo);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cn-rovere-miele);
	margin-bottom: 0.4rem;
}

@media (min-width: 60rem) {
	.cn-testo-fatti__elenco {
		border-top: 0;
		padding-top: 0.6rem;
	}
}

@media (max-width: 34rem) {
	.cn-testo-fatti__elenco {
		grid-template-columns: 1fr;
	}
}