.lv-phone {
  --lv-w: 320px;
  width: var(--lv-w);
  aspect-ratio: 1 / 2.16;
  border-radius: 14%/6.5%;
  padding: 1.6%;
  position: relative;
  background: linear-gradient(
    90deg,
    #6f7378 0%,
    #d9dce0 12%,
    #a7abb1 50%,
    #c7cace 88%,
    #5e6166 100%
  );
  box-shadow:
    0 calc(var(--lv-w) * 0.05) calc(var(--lv-w) * 0.2) rgba(0, 0, 0, 0.45),
    0 calc(var(--lv-w) * 0.1) calc(var(--lv-w) * 0.06) rgba(0, 0, 0, 0.55);
}
.lv-phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: none;
  pointer-events: none;
}
.lv-phone-bezel {
  width: 100%;
  height: 100%;
  background: #050506;
  border-radius: 11.5%/5.3%;
  padding: 1.0%;
  position: relative;
}
.lv-phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 9%/4.2%;
  overflow: hidden;
  background: #000;
  position: relative;
}
.lv-phone-screen::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.6%;
  transform: translateX(-50%);
  width: 32%;
  height: 3.5%;
  background: #0b0b0d;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}
.lv-btn {
  position: absolute;
  width: 1.1%;
  background: #b9bdc2;
  border-radius: 2px;
  z-index: 1;
}
.lv-btn-mute {
  left: -0.55%;
  top: 20%;
  height: 4.5%;
}
.lv-btn-volup {
  left: -0.55%;
  top: 27%;
  height: 7.5%;
}
.lv-btn-voldown {
  left: -0.55%;
  top: 37%;
  height: 7.5%;
}
.lv-btn-power {
  right: -0.55%;
  top: 29%;
  height: 11%;
}
.lv-phone-content {
  display: block;
  width: 100%;
  will-change: transform;
}