/* Original app screenshots; CSS only arranges the two devices. */
.product-scene { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1.42; isolation: isolate; }
.scene-halo { position: absolute; inset: 15% -10% -5%; z-index: -1; background: radial-gradient(ellipse, #cbd0be8a, #e6d5c455 45%, transparent 70%); filter: blur(25px); }
.app-screenshot { display: block; width: 100%; height: auto; }
.mac-preview { position: absolute; z-index: 0; top: 1%; left: 0; width: 92%; border-radius: 1.5cqw; overflow: hidden; box-shadow: 0 30px 55px -24px #29302055, 0 1px 4px #00000035; transition: opacity .35s, transform .35s; }
.phone-preview { position: absolute; z-index: 1; right: 0; bottom: 0; width: 25.5%; padding: .6cqw; border-radius: 3.5cqw; background: #242523; box-shadow: 0 25px 45px -18px #2d342766; transition: right .35s, width .35s, transform .35s; }
.phone-preview .app-screenshot { border-radius: 3cqw; }
.product-scene[data-device=iphone] .mac-preview { opacity: 0; visibility: hidden; transform: scale(.94); }
.product-scene[data-device=iphone] .phone-preview { right: 50%; width: 31%; transform: translateX(50%); }
@media (max-width: 600px) {
  .product-scene { aspect-ratio: .86; }
  .mac-preview { width: 97%; top: 16%; }
  .phone-preview { width: 36%; bottom: 12%; padding: .8cqw; border-radius: 4.9cqw; }
  .phone-preview .app-screenshot { border-radius: 4.2cqw; }
  .product-scene[data-device=iphone] .phone-preview { width: 54%; bottom: 0; padding: 1.2cqw; border-radius: 7cqw; }
  .product-scene[data-device=iphone] .phone-preview .app-screenshot { border-radius: 5.8cqw; }
}