/* iPhone 14 style frame, drawn in CSS. Scales with its own width (container query units). */
.iphone {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 420px;
}
.iphone-body {
  position: relative;
  padding: 3.4cqw;
  border-radius: 15.5cqw;
  background: #0d0d0f;
  box-shadow:
    inset 0 0 0 0.45cqw #2b2b2e,
    inset 0 0 0 0.9cqw #0d0d0f,
    0 6cqw 12cqw -6cqw rgba(0, 0, 0, 0.45);
}
.iphone-body::before,
.iphone-body::after {
  content: "";
  position: absolute;
  width: 0.9cqw;
  border-radius: 0.6cqw;
  background: #1c1c1f;
}
/* power button on the right, volume buttons on the left */
.iphone-body::before { right: -0.7cqw; top: 33%; height: 15%; }
.iphone-body::after { left: -0.7cqw; top: 22%; height: 21%; box-shadow: 0 -13cqw 0 -0.05cqw #1c1c1f; }
.iphone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 12.6cqw;
  aspect-ratio: 390 / 844;
  background: #fff;
}
.iphone-screen > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.iphone-notch {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 8.2cqw;
  background: #0d0d0f;
  border-radius: 0 0 5.2cqw 5.2cqw;
}
.iphone-notch::after {
  content: "";
  position: absolute;
  top: 2.8cqw;
  right: 22%;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: #1a1d2b;
}