.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;
	}
}

/*
	Carousel mode: the item is a Splide slide, so its width comes from
	Splide's per-view rather than the grid. Overrides aspect-ratio (grid
	mode's square crop) with a fixed 700px instead — a deliberate, exact
	dimension, not a spacing-scale value, same reasoning as Hero's own fixed
	50rem/800px row height.
*/
.gallery__carousel .gallery__item {
	width: 100%;
	aspect-ratio: auto;
	height: 43.75rem; /* 700px */
}

/*
	Wide viewports only: the track fills the FULL .container width (instead
	of the shared carousel layout's own side columns for the arrows — see
	assets/css/carousel.css), so the image lines up edge-to-edge with every
	other block's content, and the prev/next arrows move outside that width
	into the page's own margin instead of squeezing the image narrower.

	Scoped to .gallery__carousel only — assets/css/carousel.css's shared
	side-column layout stays exactly as-is for every other carousel block
	(Testimonial Slider). Below this breakpoint (including the existing
	sub-30em stacked-arrows fallback in carousel.css), the shared default
	applies unmodified: there usually isn't enough room outside .container
	at typical container-max + normal window widths for an overflowing arrow
	not to either crowd the image or, worse, cause real horizontal page
	scroll — 96em/1536px is comfortably past --container-max (87.5rem) plus
	room for both arrows before this kicks in.

	Needs no grid-template-columns override: Splide's own .splide__arrows
	wrapper (display: contents) already promotes the two buttons to direct
	grid items in the shared "auto minmax(0,1fr) auto" layout; position:
	absolute here takes each one out of grid flow, and an empty "auto" track
	with nothing left in it collapses its own WIDTH to 0 on its own — so the
	middle minmax(0,1fr) track absorbs 100% of that width automatically.

	column-gap does NOT collapse the same way, though — .splide's own
	column-gap: var(--carousel-arrow-gap) puts space BETWEEN grid tracks
	unconditionally, even a track that's 0 width itself, so the track was
	still indented by that gap on each side despite the side columns having
	nothing left in them. Zeroed here, since this is the one carousel where
	the track is meant to be genuinely flush with .container's own edges,
	not just visually near them.
*/
@media (min-width: 96em) {
	.gallery__carousel {
		position: relative;
		column-gap: 0;
	}

	.gallery__carousel .splide__arrow--prev,
	.gallery__carousel .splide__arrow--next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.gallery__carousel .splide__arrow--prev {
		left: calc(-1 * (var(--carousel-arrow-size) + var(--carousel-arrow-gap)));
	}

	.gallery__carousel .splide__arrow--next {
		right: calc(-1 * (var(--carousel-arrow-size) + var(--carousel-arrow-gap)));
	}
}