/*
 * About photo collage. design/DESIGN-SYSTEM.md §3.4 (grid), §5.2 (ratios);
 * design/PAGE-STRUCTURE.md §3.2.
 *
 * Two equal columns: one 3/4 portrait beside a stack of two 4/3 shots. The
 * ratios do the sizing, so the block needs no height anywhere.
 */

.sp-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
	min-width: 0;
}

.sp-collage__stack {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.sp-collage__tall,
.sp-collage__cell {
	margin: 0;
	overflow: hidden;
	background: var(--sp-bg-deep);
}

.sp-collage__tall {
	aspect-ratio: 3 / 4;
}

.sp-collage__cell {
	aspect-ratio: 4 / 3;
}

.sp-collage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}