/* 1B.7E preview parity: one stage box for admin + frontend. */

.yepx-hero-media-stage {
	--yepx-float-stage-inset: 0%;
	--yepx-media-x: 50;
	--yepx-media-y: 50;
	--yepx-media-scale: 100;
	position: relative;
	box-sizing: border-box;
	padding: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	aspect-ratio: 1200 / 675;
	overflow: visible;
}

.yepx-hero .yepx-hero-media-stage > .yepx-hero-photo.yepx-hero__device,
.yepx-hero-media-stage > .yepx-hero-photo,
.yepx-hero-media-stage > .yepx-hero__device {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	left: 0;
	top: 0;
	transform: none;
	margin: 0;
	overflow: hidden;
	border-radius: var(--yepx-media-radius, 26px);
	z-index: 1;
}

.yepx-hero-media-stage > .yepx-hero-photo img,
.yepx-hero-media-stage > .yepx-hero__device img,
.yepx-hero-media-stage .yepx-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: calc(var(--yepx-media-x, 50) * 1%) calc(var(--yepx-media-y, 50) * 1%);
	transform: scale(calc(var(--yepx-media-scale, 100) / 100));
	transform-origin: calc(var(--yepx-media-x, 50) * 1%) calc(var(--yepx-media-y, 50) * 1%);
	border-radius: inherit;
}

.yepx-hero-media-stage > .yepx-hero-floats,
.yepx-hero .yepx-hero-media-stage .yepx-hero-floats {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.yepx-hero .yepx-hero-media-stage .yepx-float-card[data-xy="1"] {
	top: calc(var(--yepx-float-y, 8) * 1%);
	left: calc(var(--yepx-float-x, 78) * 1%);
	right: auto;
	bottom: auto;
	width: 26.25%;
	min-width: 0;
	max-width: none;
}

html[data-yepx-motion="off"] .yepx-hero .yepx-float-card {
	animation: none !important;
	transform: none !important;
}

@media (max-width: 767px) {
	.yepx-hero-media-stage {
		aspect-ratio: 1200 / 675;
	}

	.yepx-hero-media-stage[data-orient-m="portrait"] {
		aspect-ratio: 3 / 4;
	}

	.yepx-hero .yepx-hero-media-stage > .yepx-hero-photo.yepx-hero__device,
	.yepx-hero-media-stage > .yepx-hero-photo,
	.yepx-hero-media-stage > .yepx-hero__device {
		width: 100%;
		height: 100%;
		border-radius: var(--yepx-media-radius-m, var(--yepx-media-radius));
	}

	.yepx-hero-media-stage > .yepx-hero-photo img,
	.yepx-hero-media-stage > .yepx-hero__device img,
	.yepx-hero-media-stage .yepx-slider__img {
		object-position: calc(var(--yepx-media-x-m, var(--yepx-media-x, 50)) * 1%) calc(var(--yepx-media-y-m, var(--yepx-media-y, 50)) * 1%);
		transform: scale(calc(var(--yepx-media-scale-m, var(--yepx-media-scale, 100)) / 100));
		transform-origin: calc(var(--yepx-media-x-m, var(--yepx-media-x, 50)) * 1%) calc(var(--yepx-media-y-m, var(--yepx-media-y, 50)) * 1%);
	}
}