/* The frames are laid out on a 1820:990 stage, the proportions of the old mockup renders. */
.nomon-devices {
	position: relative;
	aspect-ratio: 1820 / 990;
}

.nomon-devices__frame {
	position: absolute;
	overflow: hidden;
	border: solid var(--wp--preset--color--surface);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 0 0 1px var(--wp--preset--color--line);
}

.nomon-devices__frame--desktop {
	inset: 0 0 12% 20%;
	border-width: 0.375rem;
	border-radius: 0.875rem;
}

.nomon-devices__frame--phone {
	inset: 20% auto 0 0;
	width: 22%;
	border-width: 0.5rem;
	border-radius: 1.75rem;
}

.nomon-devices--phone-right .nomon-devices__frame--desktop { inset: 0 20% 12% 0; }
.nomon-devices--phone-right .nomon-devices__frame--phone { inset: 20% 0 0 auto; }

.nomon-devices__shot {
	display: block;
	width: 100%;
	height: auto;
	translate: 0 calc(var(--nomon-devices-shift, 0px) * -1);
	will-change: translate;
}

@media (prefers-reduced-motion: reduce) {
	.nomon-devices__shot { translate: 0; }
}