/* Bestell-Flexibilität – die fünf Antworten auf Versandtag, Lieferzeit,
   Kühlkette, Packstation und Abholung. Steht auf der Startseite und auf der
   Kategorieseite; lag vorher in home.css, weshalb die Kategorieseite die
   ganze Startseiten-CSS mitladen musste, um diesen einen Block zu bekommen. */

/* Versandtage, Kühlkette und Abholung standen live verstreut – hier als
   eine Zeile, die die Bestellung erklärt. */

.flexible {
	padding: var(--ffg-space-2);
	border-radius: var(--ffg-radius-card);
	background: var(--ffg-white);
	box-shadow: var(--ffg-shadow);
}

.flexible__item {
	display: flex;
	flex-direction: column;
	gap: var(--ffg-space-2);
	padding: var(--ffg-space-5);
}

.flexible__item + .flexible__item {
	border-top: 0.0625rem solid var(--ffg-border-strong);
}

.flexible__item strong {
	color: var(--ffg-charcoal);
	font-size: var(--ffg-size-md);
}

.flexible__item p {
	margin: 0;
	font-size: var(--ffg-size-base);
}

@media (min-width: 62rem) {
	.flexible {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
	}

	.flexible__item + .flexible__item {
		border-top: 0;
		border-left: 0.0625rem solid var(--ffg-border-strong);
	}
}