.c-gallery {
	--link-underline: none;
	--heading-h3-color: var(--color-white);
	display: flex;
	flex-wrap: wrap;
	--gallery-item-height: clamp(12.5rem, calc(12.5rem + ((1vw - 0.25rem) * 9.2857)), 20.625rem);
}

	.c-gallery > * {
		flex-basis: 25%;
	}

@supports (display: grid) {
	.c-gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
		grid-auto-rows: var(--gallery-item-height, 20.625rem);
		grid-auto-flow: dense;
		gap: var(--gallery-item-gap, 2.5rem);
	}
}

@media (min-width: 37.5em) and (max-width: 63.9375em) {
	.c-gallery {
		--gallery-item-gap: 1.875rem;
	}

		.c-gallery > * {
			flex-basis: 33.3333%;
		}
}

@media (max-width: 37.4375em) {
	.c-gallery {
		--gallery-item-gap: 1.25rem;
	}

		.c-gallery > * {
			flex-basis: 100%;
		}
}

.c-gallery__item {
	background-color: var(--color-black);
	color: var(--color-white);
	margin-top: 0;
	position: relative;
	z-index: 1;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: transform 0.45s var(--easing-snappy);
}

	.c-gallery__item::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		background-color: var(--color-black);
		opacity: var(--gallery-item-opacity, 0.25);
		transition: opacity 0.45s var(--easing-snappy);
	}

	:where(.c-gallery__item > *:not(.o-button))  {
		margin-top: 0;
	}

	.c-gallery__item img {
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

@media (min-width: 37.5em) {
	.c-gallery__item--span-2 {
		flex-basis: 50%;
		grid-column: span 2;
	}
}

.c-gallery__item:focus, .c-gallery__item:hover {
	text-decoration: none;
}

.c-gallery__item:hover {
	--gallery-item-opacity: 1;
	transform: translateY(-1rem) !important;
}

.c-gallery__item__title {
	max-width: 21ch;
}

.c-gallery__item .o-buttonlink {
	pointer-events: none;
}