/* mobile-release.css fits recordings beneath the measured transparent device bezels. */
.mobile-release-phone { width: 350px; max-width: 90%; margin: 32px auto; text-align: center; }
.mobile-release-phone__device { position: relative; width: 100%; aspect-ratio: 388 / 800; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, .16)); }
.mobile-release-phone__screen { position: absolute; overflow: hidden; background: #000; }
.mobile-release-phone--iphone-17 .mobile-release-phone__screen { left: 4.1237%; top: 1.625%; width: 91.7526%; height: 96.75%; border-radius: 13% / 6%; }
.mobile-release-phone--galaxy-s22 .mobile-release-phone__screen { left: 3.6082%; top: 1.75%; width: 92.0103%; height: 96.375%; border-radius: 10% / 4.6%; }
.mobile-release-phone__screen img, .mobile-release-phone__screen video { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; border: 0; }
.mobile-release-phone__device::after { content: ""; position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.mobile-release-phone--iphone-17 .mobile-release-phone__device::after { background-image: url("iphone-17-frame.png"); }
.mobile-release-phone--galaxy-s22 .mobile-release-phone__device::after { background-image: url("galaxy-s22-frame.png"); }
/* Tablet recordings are landscape screen captures shown without a device frame. */
.mobile-release-phone--tablet { width: 720px; max-width: 100%; }
.mobile-release-phone--tablet .mobile-release-phone__device { aspect-ratio: 1440 / 900; }
.mobile-release-phone--tablet .mobile-release-phone__screen { inset: 0; border-radius: 14px; }
/* The blog's .post img, video cap (_base.scss) is narrower than a tablet figure, so lift it here. */
.mobile-release-phone--tablet .mobile-release-phone__screen img, .mobile-release-phone--tablet .mobile-release-phone__screen video { max-width: none; }