.svg-zoom-container {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.svg-zoom-container::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.05);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
	z-index: 1;
}

.svg-zoom-container.zoom-active::after {
	opacity: 1;
}

.svg-image {
	height: 100%;
	display: block;
	cursor: none;
}

/* Loupe */
.zoom-lens {
	z-index: 2;
	position: absolute;
	width: 50dvh;
	height: 50dvh;
	max-width: 40dvw;
	max-height: 40dvw;
	background-repeat: no-repeat;
	background-size: 250%;
	pointer-events: none;
	display: none;
	/* border: 1px solid black; */
	transition: background-position 0.05s linear;
	background-color: white;
}

@media (pointer: coarse) {
	.zoom-lens {
		display: none !important;
	}
}