/* Testimonials style om WCAG visuele volgorde te wijzigen 1.3.2  */
/* Doel: op grotere schermen (tablet en groter) de afbeelding links, de koptekst rechts daarvan, en de paragraaf daaronder plaatsen, in die volgorde visueel, terwijl de bronvolgorde (HTML) ongewijzigd blijft voor schermlezers en toetsenbordgebruikers.

   Dit is nodig omdat in de HTML de paragraaf eerst komt, gevolgd door de afbeelding en koptekst, om een logische leesvolgorde te behouden voor schermlezers.

   Deze CSS maakt gebruik van CSS Grid om de visuele volgorde aan te passen zonder de bronvolgorde te veranderen.

   Zorg ervoor dat deze CSS wordt geladen na eventuele framework- of bibliotheekstijlen die de lay-out van het testimonials-blok beïnvloeden.*/
@media (min-width: 768px) {
	/* Use CSS Grid to reliably place image and tekst side-by-side and the paragraph beneath, which is more robust against floating utilities from the framework.*/
	.testimonials-blok {
		display: grid !important;
		grid-template-columns: 30% 1fr !important;
		grid-template-rows: auto auto !important;
		grid-template-areas: "img tekst" "paragraph paragraph" !important;
		gap: 1rem !important;
		width: 100% !important;
		align-items: start !important;
		box-sizing: border-box !important;
	}

	.testimonials-blok > .img-testimonials-blok {
		grid-area: img !important;
		justify-self: center !important;
		align-self: start !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.testimonials-blok > .testimonials-tekstkop {
		grid-area: tekst !important;
		justify-self: start !important;
		align-self: start !important;
		width: 100% !important;
	}

	.testimonials-blok > .testimonials-geschreventekst-blok {
		grid-area: paragraph !important;
		width: 100% !important;
		margin-top: 0.75rem !important;
	}
}
/* End of Testimonials visual reorder CSS */