/* 1B.7D: stage-relative float coords + image radius. Image inset 16%. */

.yepx-hero-media-stage {
	--yepx-float-stage-inset: 16%;
	--yepx-media-radius: 26px;
	position: relative;
	isolation: isolate;
	overflow: visible;
	box-sizing: border-box;
	padding: var(--yepx-float-stage-inset);
}

.yepx-hero-media-stage > .yepx-hero-photo,
.yepx-hero-media-stage > .yepx-hero__device {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--yepx-media-radius);
	position: relative;
	z-index: 1;
}

.yepx-hero-media-stage > .yepx-hero-photo img,
.yepx-hero-media-stage > .yepx-hero__device img {
	border-radius: inherit;
	display: block;
	width: 100%;
	height: auto;
}

.yepx-hero-media-stage > .yepx-hero-floats,
.yepx-hero .yepx-hero-media-stage .yepx-hero-floats {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	overflow: visible;
	pointer-events: none;
	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;
	pointer-events: auto;
}

.yepx-hero .yepx-float-card[data-vis="desktop_only"] {
	display: flex;
}

.yepx-hero .yepx-float-card[data-vis="mobile_only"] {
	display: none;
}

@media (max-width: 1365px) {
	.yepx-hero-media-stage {
		padding: 8% 6%;
	}

	.yepx-hero .yepx-hero-media-stage .yepx-float-card[data-xy="1"] {
		top: calc(var(--yepx-float-my, var(--yepx-float-y, 70)) * 1%);
		left: calc(var(--yepx-float-mx, var(--yepx-float-x, 4)) * 1%);
		right: auto;
		bottom: auto;
	}

	.yepx-hero .yepx-float-card[data-vis="desktop_only"] {
		display: none !important;
	}

	.yepx-hero .yepx-float-card[data-vis="mobile_only"],
	.yepx-hero .yepx-float-card[data-vis="both"] {
		display: flex !important;
	}
}

@media (max-width: 767px) {
	.yepx-hero-media-stage {
		padding: 4% 2%;
	}
}