// Template rows with the "image-mosaic" class.
// The right-hand images keep their own proportions, and the first (tall) image crops to
// fill the height they add up to. Same layout on every screen size.
.image-mosaic {
	> [class*="col"] {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	> [class*="col"] + [class*="col"] { padding-left: 8px; }

	img {
		width: 100%;
		height: auto;
	}

	> [class*="col"]:first-child {
		position: relative;

		img {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			object-fit: cover;
		}
	}

	// Phones and tablets: keep the tall photo and the stacked pair side by side (7/5 split,
	// as on desktop) instead of the columns stacking one under the other.
	@include media-breakpoint-down(md) {
		> [class*="col"]:first-child {
			flex: 0 0 58.3333%;
			max-width: 58.3333%;
		}

		> [class*="col"] + [class*="col"] {
			flex: 0 0 41.6667%;
			max-width: 41.6667%;
		}
	}
}