.device {
  --w: 300px;
  position: relative;
  width: var(--w);
  max-width: 100%;
  padding: calc(var(--w) * .032);
  border-radius: calc(var(--w) * .16);
  background: #0b1220;
  box-shadow:
    inset 0 0 0 calc(var(--w) * .005) #4a5263,
    inset 0 0 0 calc(var(--w) * .011) #0b1220,
    0 1px 2px rgba(11, 18, 32, .18),
    0 40px 80px -30px rgba(11, 18, 32, .45);
}
.device::before {
  content: "";
  position: absolute;
  right: calc(var(--w) * -.011);
  top: 20%;
  width: calc(var(--w) * .011);
  height: 11%;
  border-radius: 0 3px 3px 0;
  background: #1e2533;
  box-shadow: 0 calc(var(--w) * .27) 0 0 #1e2533;
}
.device-screen {
  position: relative;
  aspect-ratio: 1080 / 2340;
  border-radius: calc(var(--w) * .128);
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}
.device-screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1.15%;
  left: 50%;
  width: 3.6%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #2b3445 0 22%, #05070b 40%);
}
.device-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}