.dzv-project-gallery {
	--dzv-gallery-active-color: #4fbf39;
	--dzv-gallery-active-overlay-opacity: .45;
	--dzv-gallery-active-ring-width: 4px;
	--dzv-gallery-columns-desktop: 6;
	--dzv-gallery-columns-mobile: 3;
	--dzv-gallery-columns-tablet: 3;
	--dzv-gallery-gap: 32px;
	--dzv-gallery-gap-mobile: 20px;
	--dzv-gallery-main-radius: 24px;
	--dzv-gallery-main-ratio: 4 / 3;
	--dzv-gallery-mobile-thumb-size: 84px;
	--dzv-gallery-thumb-gap: 24px;
	--dzv-gallery-thumb-gap-mobile: 12px;
	--dzv-gallery-thumb-radius: 20px;
	--dzv-gallery-thumb-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: var(--dzv-gallery-gap);
	width: 100%;
}

.dzv-project-gallery__thumbs {
	display: grid;
	gap: var(--dzv-gallery-thumb-gap);
	grid-template-columns: repeat(var(--dzv-gallery-columns-desktop), minmax(0, 1fr));
	order: 1;
	width: 100%;
}

.dzv-project-gallery__thumb {
	aspect-ratio: var(--dzv-gallery-thumb-ratio);
	border-radius: var(--dzv-gallery-thumb-radius);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
}

.dzv-project-gallery__thumb::after {
	background: rgba(255, 255, 255, .62);
	content: "";
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity .18s ease;
}

.dzv-project-gallery__thumb.is-active::after {
	opacity: var(--dzv-gallery-active-overlay-opacity);
}

.dzv-project-gallery__thumb.is-active {
	box-shadow: 0 0 0 var(--dzv-gallery-active-ring-width) var(--dzv-gallery-active-color);
}

.dzv-project-gallery__thumb:focus-visible {
	outline: 3px solid var(--dzv-gallery-active-color);
	outline-offset: 4px;
}

.dzv-project-gallery__thumb-image,
.dzv-project-gallery__thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.dzv-project-gallery__main {
	appearance: none;
	aspect-ratio: var(--dzv-gallery-main-ratio);
	background: transparent;
	border: 0;
	border-radius: var(--dzv-gallery-main-radius);
	cursor: zoom-in;
	display: block;
	order: 2;
	overflow: hidden;
	padding: 0;
	width: 100%;
}

.dzv-project-gallery__main:focus-visible {
	outline: 3px solid var(--dzv-gallery-active-color);
	outline-offset: 6px;
}

.dzv-project-gallery__main-image,
.dzv-project-gallery__main img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: opacity .16s ease;
	width: 100%;
}

.dzv-project-gallery.is-switching .dzv-project-gallery__main-image {
	opacity: .72;
}

@media (hover: hover) {
	.dzv-project-gallery__thumb:not(.is-active):hover {
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--dzv-gallery-active-color), transparent 45%);
	}
}

@media (max-width: 991px) {
	.dzv-project-gallery__thumbs {
		grid-template-columns: repeat(var(--dzv-gallery-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.dzv-project-gallery {
		gap: var(--dzv-gallery-gap-mobile);
	}

	.dzv-project-gallery__thumbs {
		gap: var(--dzv-gallery-thumb-gap-mobile);
	}

	.dzv-project-gallery--mobile-grid .dzv-project-gallery__thumbs {
		grid-template-columns: repeat(var(--dzv-gallery-columns-mobile), minmax(0, 1fr));
	}

	.dzv-project-gallery--mobile-scroll .dzv-project-gallery__thumbs {
		display: flex;
		flex-wrap: nowrap;
		margin-inline: calc(var(--dzv-gallery-active-ring-width) * -1);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		padding: var(--dzv-gallery-active-ring-width) var(--dzv-gallery-active-ring-width) 10px;
		scroll-padding-inline: var(--dzv-gallery-active-ring-width);
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.dzv-project-gallery--mobile-scroll .dzv-project-gallery__thumb {
		flex: 0 0 var(--dzv-gallery-mobile-thumb-size);
		scroll-snap-align: start;
		width: var(--dzv-gallery-mobile-thumb-size);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dzv-project-gallery__main-image,
	.dzv-project-gallery__thumb::after {
		transition: none;
	}
}