/*
 * Image pair: both photographs share one row height (--pair-height), so a
 * wide and a narrow picture line up top and bottom; captions sit in a
 * second row of the same grid.
 */
@layer blocks {
	.pair__grid {
		display: grid;
		gap: var(--space-6);
	}

	.pair__figure {
		display: grid;
		gap: var(--space-3);
		margin: 0;
		min-width: 0;
	}

	.pair__media {
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--muted);
	}

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

	.pair__caption {
		max-width: none;
		color: var(--subtle-foreground);
	}

	@media (min-width: 48rem) {
		.pair__grid {
			--pair-height: clamp(18rem, 30vw, 26rem);

			grid-template-columns: 7fr 5fr;
			grid-template-rows: var(--pair-height) auto;
			gap: var(--space-3) var(--space-4);
		}

		.pair--wide-right .pair__grid {
			grid-template-columns: 5fr 7fr;
		}

		.pair--equal .pair__grid {
			grid-template-columns: 1fr 1fr;
		}

		.pair__figure {
			grid-row: span 2;
			grid-template-rows: subgrid;
			gap: 0;
		}

		.pair__media {
			aspect-ratio: auto;
			height: 100%;
		}
	}
}