.cdt-artist-gallery {
	inline-size: min(100% - 3rem, 1400px);
	margin-inline: auto;
	padding-block: clamp(3.5rem, 7vw, 7rem);
	color: var(--secondary);
}

.cdt-artist-gallery__heading {
	display: grid;
	grid-template-columns: minmax(7rem, 0.25fr) minmax(0, 1fr);
	align-items: end;
	gap: 1.5rem;
	margin-block-end: clamp(1.75rem, 4vw, 3.5rem);
}

.cdt-artist-gallery__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
}

.cdt-artist-gallery h2 {
	margin: 0;
	font-size: clamp(2.25rem, 5vw, 5rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.95;
}

.cdt-artist-gallery__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.5rem);
}

.cdt-artist-gallery__item {
	position: relative;
	display: block;
	grid-column: span 4;
	min-block-size: 20rem;
	overflow: hidden;
	background: #e8e5df;
}

.cdt-artist-gallery__item:nth-child(5n + 1),
.cdt-artist-gallery__item:nth-child(5n + 4) {
	grid-column: span 8;
}

.cdt-artist-gallery__item:nth-child(5n + 1) {
	min-block-size: clamp(26rem, 52vw, 46rem);
}

.cdt-artist-gallery__item img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 300ms ease;
}

.cdt-artist-gallery__item::after {
	content: "+";
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	background: var(--primary);
	color: var(--secondary);
	font-size: 1.5rem;
	line-height: 1;
	transform: translateY(4rem);
	transition: transform 250ms ease;
}

.cdt-artist-gallery__item:hover img,
.cdt-artist-gallery__item:focus-visible img {
	filter: brightness(0.88);
	transform: scale(1.035);
}

.cdt-artist-gallery__item:hover::after,
.cdt-artist-gallery__item:focus-visible::after {
	transform: translateY(0);
}

.cdt-artist-gallery__item:focus-visible {
	outline: 0.25rem solid var(--accent);
	outline-offset: 0.25rem;
}

@media (max-width: 767px) {
	.cdt-artist-gallery {
		inline-size: min(100% - 2rem, 1400px);
		padding-block: 3.5rem;
	}

	.cdt-artist-gallery__heading {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.cdt-artist-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}

	.cdt-artist-gallery__item,
	.cdt-artist-gallery__item:nth-child(5n + 1),
	.cdt-artist-gallery__item:nth-child(5n + 4) {
		grid-column: span 1;
		min-block-size: 13rem;
	}

	.cdt-artist-gallery__item:nth-child(3n + 1) {
		grid-column: span 2;
		min-block-size: 20rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdt-artist-gallery__item img,
	.cdt-artist-gallery__item::after {
		transition: none;
	}
}