/* Before/after cases ([mm_cases], inc/cases.php). Each pair reproduces the old 1603×804 composite images:
   a white band 210/1603 of the width with the label centred over each photo and the logo in the middle, then the
   two photos (800×594 each) with a ~4px white gap. Sizes are in cqw (percent of the figure width) so the band
   scales exactly like the old image did. Two pairs per row from 992px, one below. */

.mm-cases {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.mm-cases {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* the old composites sat 24px apart side by side and ~62px apart row to row, ~53px above the footer */
		gap: 62px 24px;
		padding-bottom: 23px; /* + the section's 30px; a margin is dropped as the column's last child */
	}
}

.mm-pair {
	container-type: inline-size;
	margin: 0;
	background: #fff;
}

.mm-pair__band {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	aspect-ratio: 1603 / 210;
	background: #fff;
}

/* The composites used a thin geometric uppercase sans (Futura-like); it is only used where installed, otherwise the
   site's Open Sans. Greek thin and widely spaced, English bold and spaced. */
.mm-pair__label {
	font-family: Futura, "Futura PT", "Century Gothic", "Avenir Next", var(--mm-font, "Open Sans", sans-serif);
	font-size: 3.4cqw;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .14em;
	padding-left: .14em; /* balance the trailing letter-spacing so the word stays centred */
	text-align: center;
	text-transform: uppercase;
	color: #000;
}

.mm-pair--en .mm-pair__label {
	font-weight: 700;
	letter-spacing: .28em;
	padding-left: .28em;
}

.mm-pair__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14cqw;
	aspect-ratio: 144.09 / 88.972;
	transform: translate(-50%, -50%);
	background: url(mm-logo-band.svg) center / contain no-repeat;
}

.mm-pair__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: max(2px, .25cqw);
	background: #fff;
}

.mm-pair__img {
	display: block;
	overflow: hidden;
}

.mm-pair__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 800 / 594;
	object-fit: contain; /* landscape 4:3 photos fill the frame; portrait ones are shown whole on white */
	background: #fff;
}

/* Legacy case (a migrated image that was not a before/after composite): shown once at its own proportions. */
.mm-pair--legacy .mm-pair__img img {
	aspect-ratio: auto;
}

/* Optional case text: full row width, after the case's pair(s). */
.mm-case__text {
	grid-column: 1 / -1;
}

.mm-case__text > :last-child {
	margin-bottom: 0;
}