device-mockup { display:block; position:relative; flex:none; isolation:isolate; }
.device-display, .device-frame { position:absolute; inset:0; width:100%; height:100%; }
.device-display { mask-size:100% 100%; mask-repeat:no-repeat; -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; }
.device-display > img, .device-display > video { position:absolute; object-fit:cover; display:block; }
.device-frame { pointer-events:none; }
.device-composition { display:flex; gap:3%; align-items:flex-end; justify-content:center; }
.device-composition device-mockup { width:var(--device-width); }
case-mockup { display:block; width:100%; }

.device-scroll-viewport { position:absolute;overflow:hidden; }
.device-scroll-viewport .device-scroll-image { display:block;width:100%;height:auto;animation:device-scroll var(--scroll-duration,20s) linear infinite;animation-play-state:paused; }
.device-scroll-image.reduced-motion { animation:none;transform:none; }
@keyframes device-scroll { 0%,8%,100% {transform:translateY(0)} 46%,54% {transform:translateY(var(--scroll-distance,0px))} 92% {transform:translateY(0)} }
.device-composition[data-layout="overlap"] { gap:0; }
.device-composition[data-layout="overlap"] device-mockup + device-mockup { margin-left:-5%; }