/**
 * S44 — Teamraster met portretten.
 *
 * Gevolgd naar het ontwerp: vier brede portretten (ongeveer 305 bij 230) met de naam
 * eronder, en rechtsonder de link naar de rest van het team.
 */

.drieo-s44__kop {
	margin-bottom: 2.25rem;
}

/* Staat er een intro onder de kop, dan schuift de kop dichter naar die intro toe. */
.drieo-s44__kop:has(+ .drieo-s44__intro) {
	margin-bottom: .625rem;
}

.drieo-s44__intro {
	max-width: 56ch;
	margin-bottom: 2.25rem;
}

.drieo-s44__raster {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Vierkant kader, afwijkend van het liggende kader in het ontwerp. De portretten in
 * de bibliotheek zijn zelf vierkant (560 bij 560); in een liggend kader van 4:3 werd
 * daar boven en onder een achtste vanaf gesneden, precies over de haargrens. Nu valt
 * kader en foto samen en blijft het portret compleet.
 */
.drieo-s44__lid .drieo-beeldkader {
	aspect-ratio: 1 / 1;
	margin-bottom: 1rem;
	border-radius: var(--drieo-radius);
}

.drieo-s44__naam {
	margin-bottom: .3125rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

.drieo-s44__functie {
	font-size: .875rem;
	line-height: 1.55;
	color: var(--drieo-tekst);
}

/* In het ontwerp is dit geen knop maar een oranje tekstlink zonder pijl. */
.drieo-s44__actie {
	margin-top: 2rem;
	text-align: right;
}

.drieo-s44__actie .drieo-tekstlink {
	font-size: var(--drieo-knop-grootte);
	font-weight: 600;
	color: var(--drieo-oranje);
}

.drieo-s44__actie .drieo-tekstlink:hover {
	color: var(--drieo-oranje-hover);
}

.drieo-s44__actie .drieo-tekstlink::after {
	content: none;
}

@media (max-width: 767px) {
	/* Twee naast elkaar houdt de portretten herkenbaar; één per rij wordt te lang. */
	.drieo-s44__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.drieo-s44__actie {
		text-align: left;
	}
}