.gallery {
	display: grid;
	align-content: start;
	align-items: baseline;
	gap: 0 var(--margin-double);
	grid-template-columns: 1fr 1fr;
	padding-top: 33vh;
	padding-top: 33svh;
	padding-inline: var(--margin-double);
}

.gallery.invert {
	padding-bottom: 33vh;
	padding-bottom: 33svh;
}

:not(.hero, .invert, .machine, .steps) + .gallery.invert {
	margin-top: 33vh;
	margin-top: 33svh;
}

.gallery + .gallery:not(:has(h2, .reveal), .invert),
.gallery.invert + .gallery.invert:not(:has(h2, .reveal)) {
	padding-top: var(--margin-double);
}

.gallery__wrapper {
	grid-column: 1 / -1;
	display: grid;
	align-items: end;
	gap: var(--margin-double);
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(var(--rows), auto) 1fr;
}

:is(h2, .reveal) + .gallery__wrapper {
	margin-top: 16vh;
	margin-top: 16svh;
}

.gallery__image {
	grid-column: var(--column);
	display: grid;
	gap: var(--margin-half);
	overflow: hidden;
	position: relative;
}

.gallery__image > img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1s cubic-bezier(.08,.82,.17,1);
}

.gallery__caption {
	grid-column: 1 / -1;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	color: hsl(var(--hsl-medium-grey));
	font-family: "Suisse Intl Mono";
	font-size: inherit;
	font-weight: normal;
	text-transform: uppercase;
	text-wrap: balance;
}

.gallery__caption > a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.gallery__caption .animate > span {
	--name: none !important;
}

.gallery__image--reveal > .gallery__caption .animate > span {
	--name: in !important;
}

@media (orientation: portrait) {
	.gallery {
		grid-template-columns: 1fr;
	}

	.gallery > h2 + .reveal {
		margin-top: var(--margin-double);
	}
}

@media (max-width: 1024px) {
	.gallery__wrapper {
		grid-template-columns: 1fr 1fr;
	}

	.gallery__image {
		grid-column: auto;
	}
}