/* Block: Team. A calm grid of portraits: rounded like the panels, name in the serif, role muted.
 * No hover effects, no overlays: the people carry it. 4 columns wide, 3 on tablets, 2 on phones. */
.team-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--gap);
	row-gap: clamp(40px, 4vw, 64px);
}
.person { display: grid; gap: 6px; align-content: start; }
.person-photo {
	margin: 0 0 14px;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-l);
	overflow: hidden;
	background: var(--beige);
}
.person-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
/* No photo yet: the beige frame with the band (beige tint) inside it, clipped by the radius. */
.person-photo--empty { position: relative; --bc: var(--beige-tint); --bl: 34%; --bw: 46%; }
.person-name { font-size: var(--fs-h3); line-height: 1.1; }
.person-role { color: var(--ink-soft); font-size: var(--fs-small); }

@media (max-width: 1180px) {
	.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.person-photo { border-radius: var(--radius); margin-bottom: 10px; }
	.person-name { font-size: 22px; }
}