/**
 * S24 — Tekst links, foto rechts met een oranje hoeklijn erachter.
 *
 * Gevolgd naar het ontwerp: de fotokolom is 470 breed, de foto 330 hoog, en er ligt een
 * vierkant van 180 met alleen een boven- en rechterrand overheen, verschoven naar
 * rechtsboven. De foto zelf schuift daarom 20px naar links en beneden.
 */

.drieo-s24__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 470px;
	gap: var(--drieo-gap-groot);
	align-items: center;
}

.drieo-s24__kop {
	margin-bottom: .875rem;
}

.drieo-s24__body {
	max-width: 520px;
	margin-bottom: 1.625rem;
	font-size: var(--drieo-lead);
	line-height: var(--drieo-lh-tekst);
	color: var(--drieo-tekst-diep);
}

.drieo-s24__beeld {
	position: relative;
	padding: 20px 20px 0 0;
}

.drieo-s24__hoek {
	position: absolute;
	top: 0;
	right: 0;
	width: 180px;
	height: 180px;
	border-top: var(--drieo-accentlijn) solid var(--drieo-oranje);
	border-right: var(--drieo-accentlijn) solid var(--drieo-oranje);
	border-radius: 0 var(--drieo-radius-groot) 0 0;
}

.drieo-s24__beeld .drieo-beeldkader {
	position: relative;
	height: 330px;
	border-radius: var(--drieo-radius-kaart);
}

@media (max-width: 1023px) {
	.drieo-s24__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.drieo-s24__body {
		max-width: none;
	}

	.drieo-s24__beeld .drieo-beeldkader {
		height: 280px;
	}
}

@media (max-width: 767px) {
	/* De hoeklijn is op deze breedte meer ruis dan accent. */
	.drieo-s24__hoek {
		display: none;
	}

	.drieo-s24__beeld {
		padding: 0;
	}

	.drieo-s24__beeld .drieo-beeldkader {
		height: 220px;
	}
}