.gallery__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(2, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.gallery__item {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius);
	background-color: var(--color-surface);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/*
	Fit: Original Size (gallery.php's own $is_contain — grid mode only, a
	gallery-wide choice). Swaps the square aspect-ratio box for a fixed
	height instead — with photos of differing aspect ratios all shown
	whole rather than cropped to a shared shape, letting each one keep its
	own width (via object-fit: contain) means the CELLS can't stay square;
	a shared height is what still keeps the grid reading as one uniform
	row-by-row layout instead of a jumble of different-sized boxes.
	300px is a starting point, not a tokenized value — the same
	"block-specific dimension" treatment other one-off sizes in this theme
	get (Hero's 800px, Team Carousel's own 400px photo cap); adjust freely.

	object-position: center !important is necessary, not decorative —
	sd_render_image() (inc/acf-focal-point.php) always sets an inline
	object-position from the image's own Focal Point field, for Cover
	mode's cropping. That has no meaning once nothing is being cropped,
	and an inline style beats any external stylesheet rule without
	!important — the one other place in this theme fighting an inline
	style this way is typography.css's own .prose .wp-caption rule.
*/
.gallery__grid--contain .gallery__item {
	aspect-ratio: auto;
	height: 18.75rem; /* 300px */
}

.gallery__grid--contain .gallery__item img {
	object-fit: contain;
	object-position: center !important;
}

/*
	Carousel mode: the item is a Splide slide, so its width comes from
	Splide's per-view rather than the grid. Fixed height rather than
	.gallery__item's aspect-ratio — with both width and height set
	explicitly, aspect-ratio has nothing left to fill in and is ignored, so
	this doesn't need to override it separately.
*/
.gallery__carousel .gallery__item {
	width: 100%;
	height: 43.75rem; /* 700px */
}

/*
	Gallery's own prev/next buttons use the shared .carousel-arrow class
	(assets/css/carousel.css — the 48px circle/border/hover-invert look,
	and the shared [prev][track][next] grid placement + narrow-screen
	fallback), not Splide's reserved .splide__arrow* names (see the warning
	in carousel.css's own "Arrows" section for why a bring-your-own button
	can't use those). Only the wide-desktop enhancement below is Gallery's
	own — Spotlight doesn't have it.
*/

/*
	Wide desktop only: the image spans the full container, and the arrows
	move outside it entirely instead of sharing the grid with the track
	(assets/css/carousel.css's default: [prev][track][next] columns). That
	default exists so a transitioning slide can never pass underneath an
	arrow — pulling the arrows fully outside the track's box preserves the
	same guarantee a different way, since track and arrows now never occupy
	the same horizontal space at all, rather than because they're in
	separate grid columns.

	90em isn't arbitrary: --container-max is 75rem (1200px), and each arrow
	needs roughly --carousel-arrow-size (3rem) plus a gap of clearance
	beyond it. 90em leaves ~7.5rem of margin on each side at that width —
	comfortable room for a 3rem button. Below it (a 1280–1366px laptop,
	a tablet, anything narrower) there isn't reliably enough margin outside
	a 1200px container for the arrows not to run past the viewport edge, so
	those widths keep the safe in-grid arrows instead.
*/
@media (min-width: 90em) {
	.gallery__carousel {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.gallery__carousel .splide__track {
		grid-column: 1;
	}

	.gallery__carousel .carousel-arrow--prev,
	.gallery__carousel .carousel-arrow--next {
		position: absolute;
		top: 50%;
	}

	.gallery__carousel .carousel-arrow--prev {
		left: 0;
		transform: translate(calc(-100% - var(--space-4)), -50%);
	}

	.gallery__carousel .carousel-arrow--next {
		right: 0;
		transform: translate(calc(100% + var(--space-4)), -50%);
	}
}