/**
 * Komorebi People (Figma "V8 People · At the counter": Home 18:6550 / 18:7307 / 18:8026, Our
 * story 18:6848 / 18:7565 / 18:8300). Sage section.
 *
 * Desktop: the photo 464 × 480 (caption 12 under it), 64 to its right the text column (672),
 * centred on the photo: title (h2), the line 16 under it (body-lg, muted), 40 under that two
 * cards 24 apart. A card: rule on top (ink 25%; one side, as the card has only top padding),
 * 20 under it the role (label, muted), the name (Shippori 28/120) and one line (16, muted),
 * 6 apart. Tablet: the photo 770 × 420 on top (caption 10), the text 28 under it, cards 24
 * under the title, 16 apart, padding 16, name 24, line 15, 4 apart. Phone: photo 350 × 520,
 * title to line 12, the cards stacked 48 under the line.
 */

.km-people {
	--km-people-rule: rgb(37 66 51 / 0.25);
	--km-people-cols: 2;
	--km-people-name: 28px;
	--km-people-line: 16px;
	--km-people-gap: 6px;
}

.km-people__grid {
	display: grid;
	grid-template-columns: minmax(0, 464fr) minmax(0, 672fr);
	gap: 64px;
	align-items: center;
}

.km-people__photo .km-figure__media {
	aspect-ratio: 464 / 480;
}

.km-people__photo picture {
	display: block;
	height: 100%;
}

.km-people__photo .km-figure__caption {
	margin-top: 12px;
}

.km-people__body {
	min-width: 0;
}

.km-people__text {
	margin-top: 16px;
	color: var(--km-muted);
}

.km-people__cards {
	display: grid;
	grid-template-columns: repeat(var(--km-people-cols), minmax(0, 1fr));
	gap: 16px 24px;
	margin-top: 40px;
}

.km-people__cards:first-child {
	margin-top: 0;
}

.km-people__card {
	display: flex;
	flex-direction: column;
	gap: var(--km-people-gap);
	padding-top: 20px;
	border-top: 1px solid var(--km-people-rule);
}

.km-people__role {
	color: var(--km-muted);
}

.km .km-people__name {
	color: var(--km-heading);
	font-family: var(--km-serif);
	font-size: var(--km-people-name);
	font-weight: 400;
	line-height: 1.2;
}

.km-people__line {
	color: var(--km-muted);
	font-size: var(--km-people-line);
	line-height: var(--km-lh-text);
}

/* Tablet (834): the photo on top. */
@media (max-width: 1024px) {
	.km-people {
		--km-people-name: 24px;
		--km-people-line: 15px;
		--km-people-gap: 4px;
	}

	.km-people__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.km-people__photo .km-figure__media {
		aspect-ratio: 770 / 420;
	}

	.km-people__photo .km-figure__caption {
		margin-top: 10px;
	}

	.km-people__cards {
		gap: 16px;
		margin-top: 24px;
	}

	.km-people__card {
		padding-top: 16px;
	}
}

/* Phone (390): portrait photo, the cards stacked. */
@media (max-width: 767px) {
	.km-people {
		--km-people-cols: 1;
	}

	.km-people__photo .km-figure__media {
		aspect-ratio: 350 / 520;
	}

	.km-people__text {
		margin-top: 12px;
	}

	.km-people__cards {
		margin-top: 48px;
	}
}