/**
 * Komorebi References (Figma "M11 References · Rooms we learn from", 18:6866 / 18:7582 /
 * 18:8317). Sage section.
 *
 * The label (12, muted), 16 under it the title (h2 48 / 40 / 32, PLAN.md Q15b; Figma draws
 * 52 / 44 / 34), 16 under that the intro (17 / 17 / 16, muted, 640 wide). 32 under the
 * heading two photos side by side, 24 apart (588 × 460; tablet 373 × 440), square corners
 * (Q15c), captions 10 under them; phone: stacked 24 apart, 350 × 320. The link 32 under them.
 */

.km-references {
	--km-references-intro: 17px;
	--km-references-ratio: 588 / 460;
}

.km-references__head .km-eyebrow {
	margin-bottom: 16px;
}

.km-references__text {
	max-width: 640px;
	margin-top: 16px;
	color: var(--km-muted);
	font-size: var(--km-references-intro);
	line-height: var(--km-lh-text);
}

.km-references__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 32px;
}

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

.km-references__photo .km-figure__media {
	aspect-ratio: var(--km-references-ratio);
}

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

.km-references__link {
	margin-top: 32px;
}

@media (max-width: 1024px) {
	.km-references {
		--km-references-ratio: 373 / 440;
	}
}

@media (max-width: 767px) {
	.km-references {
		--km-references-intro: 16px;
		--km-references-ratio: 350 / 320;
	}

	.km-references__photos {
		grid-template-columns: minmax(0, 1fr);
	}
}