.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. 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 */
}

@media (max-width: 47.99em) {
	.gallery__carousel .gallery__item {
		height: 25rem; /* 400px */
	}
}

/*
	Gallery's own prev/next buttons — deliberately NOT Splide's reserved
	.splide__arrow / --prev / --next classes (see the warning in
	assets/css/carousel.css's "Arrows" section: Splide auto-adopts anything
	carrying those exact names as a pre-supplied custom arrow and crashes
	without its own .splide__arrows wrapper alongside them). These sit in
	the same [prev][track][next] grid columns carousel.css's base .splide
	rule defines, they just aren't promoted through a `display: contents`
	wrapper the way Splide's own generated pair would be — each is a real
	direct child of .splide already, so it can take its own column as-is.

	The icon (assets/icons/arrow.svg, rd_icon('arrow')) is a filled
	circle-with-arrow mark, not a bare chevron — it supplies its own round
	frame, so the button carries no border/background of its own. One icon,
	mirrored for "previous" via scaleX(-1), same as Splide's own arrows do.
*/
.gallery__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--carousel-arrow-size);
	height: var(--carousel-arrow-size);
	padding: 0;
	border: none;
	background-color: transparent;
	color: inherit;
	transition: color var(--transition);

	& svg {
		width: 100%;
		height: 100%;
		fill: currentColor;
	}

	&:hover:not(:disabled) {
		color: var(--color-accent-bg);
	}
}

/*
	Matches FAQ's own mobile icon-button size (.faq-item__question svg,
	blocks/faqs/faqs.css) — 2rem, down from the shared --carousel-arrow-size
	(2.75rem). Overridden directly on .gallery__arrow itself rather than
	reassigning --carousel-arrow-size at this width: that custom property
	is scoped to .splide (assets/css/carousel.css) and also drives Splide's
	own native arrows on any OTHER carousel block, which this request was
	never about — only Gallery's own prev/next buttons.
*/
@media (max-width: 47.99em) {
	.gallery__arrow {
		width: 2rem;
		height: 2rem;
	}

	/*
		Splide's own pagination dots (assets/css/carousel.css), scoped to
		Gallery specifically rather than hiding .splide__pagination
		globally — that class is shared with any other carousel block, and
		this request was only ever about Gallery's own dots.
	*/
	.flex-section--gallery .splide__pagination {
		display: none;
	}
}

.gallery__arrow--prev {
	grid-column: 1;
	grid-row: 1;

	& svg {
		transform: scaleX(-1);
	}
}

.gallery__arrow--next {
	grid-column: 3;
	grid-row: 1;
}

/*
	Below 30em, matches carousel.css's own narrow-screen fallback for
	Splide's generated arrows: side columns cost too much on a phone, so the
	grid drops to a single track column and the two buttons move to a
	centred row underneath it instead. Splide's version reuses a real
	.splide__arrows flex wrapper for the centring; Gallery has no such
	wrapper (see the class-name note above), so a two-column sub-grid on
	row 2 does the same job — each button pinned toward the shared middle
	gap via justify-self.
*/
@media (max-width: 30em) {
	.gallery__carousel {
		grid-template-columns: 1fr 1fr;
	}

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

	.gallery__arrow--prev,
	.gallery__arrow--next {
		grid-row: 2;
		margin-block-start: var(--space-4);
	}

	.gallery__arrow--prev {
		grid-column: 1;
		justify-self: end;
		margin-inline-end: var(--carousel-arrow-gap);
	}

	.gallery__arrow--next {
		grid-column: 2;
		justify-self: start;
		margin-inline-start: var(--carousel-arrow-gap);
	}
}

/*
	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 (2.75rem) plus a gap of clearance
	beyond it. 90em leaves ~7.5rem of margin on each side at that width —
	comfortable room for a 2.75rem 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 .gallery__arrow--prev,
	.gallery__carousel .gallery__arrow--next {
		position: absolute;
		top: 50%;
	}

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

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