/*
 * Gallery grid. design/PAGE-STRUCTURE.md §3.5, DESIGN-SYSTEM.md §3.4 / §6.1.
 *
 * Six 4/3 tiles, 12px gutters, hover zoom clipped by the tile. The minmax()
 * floor is 230px per §3.4, and the max() term caps the track count at three so
 * the six tiles wrap 3 + 3 instead of the prototype's 5 + 1 (§3.6).
 */

.sp-gallery {
	--sp-gallery-gap: 12px;

	display: grid;
	gap: var(--sp-gallery-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(max(230px, (100% - 2 * var(--sp-gallery-gap)) / 3), 1fr)
	);
}

.sp-gallery__item {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sp-bg);
}

.sp-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sp-dur-slow) var(--sp-ease);
}

.sp-gallery__item:hover .sp-gallery__img {
	transform: scale(1.06);
}

.sp-gallery__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--sp-2) var(--sp-3);
	background: var(--sp-header-bg);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}