/*
 * Page « Notre équipe ».
 */

.s-team {
	padding-bottom: 120px;
}

/*
 * Grille de trois colonnes séparées de 24 px. La largeur se déduit de
 * l'espacement : changer de palier revient à redéfinir une seule variable.
 */
.s-team__list {
	--cards-gap: 24px;
	--cards-per-row: 3;

	display: flex;
	flex-wrap: wrap;
	gap: var(--cards-gap);
}

.s-team__card {
	display: flex;
	flex-direction: column;
	flex: 0 1 calc(
		(100% - var(--cards-gap) * (var(--cards-per-row) - 1)) / var(--cards-per-row)
	);
	min-width: 0;
	padding: 16px;
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	box-shadow: 0 2px 16px rgba(16, 16, 16, 0.06);
}

.s-team__media {
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 258 / 298;
}

.s-team__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Nom et rôle d'un côté, lien social de l'autre : le pictogramme reste aligné
 * à droite quelle que soit la longueur des intitulés.
 */
.s-team__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-xs) var(--space-2xs);
}

.s-team__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}

.s-team__role {
	margin: 4px 0 0;
	color: var(--color-violet);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.s-team__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-violet);
}

.s-team__social-icon {
	width: 100%;
	height: 100%;
}

@media (max-width: 1199px) {
	.s-team {
		padding-bottom: var(--space-3xl);
	}

	.s-team__list {
		--cards-per-row: 2;
	}
}

@media (max-width: 599px) {
	.s-team__list {
		--cards-per-row: 1;
	}
}