:root {
	--encuero-hero-bag-size: min(100%, 58rem);
	--encuero-hero-bag-size-mobile: min(100%, 28rem);
}

.encuero-anim-hero-360 {
	position: relative;
}

.encuero-hero-visual {
	position: relative;
}

.encuero-hero-overlay {
	position: relative;
	width: var(--encuero-hero-bag-size);
	max-width: 100%;
	aspect-ratio: 1376 / 768;
}

.encuero-hero-media,
.encuero-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.encuero-hero-canvas {
	opacity: 0;
	transition: opacity 240ms ease;
  padding: 10px;
}

.encuero-anim-hero-360.is-sequence-ready .encuero-hero-canvas {
	opacity: 1;
}

.encuero-anim-hero-360.is-sequence-ready .encuero-hero-media {
	opacity: 0;
}

@media (max-width: 767px) {
	.encuero-hero-overlay {
		width: var(--encuero-hero-bag-size-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	.encuero-hero-canvas {
		transition: none;
	}
}