@media (max-width: 700px) {
  [data-maia-phone-parallax] {
    --phone-progress: 0;
    --phone-x: 0px;
    --phone-y: 7vh;
    --phone-scale: .84;
    --shadow-scale-x: .92;
    --shadow-opacity: .5;
    --shadow-shift-x: 0px;
  }

  .mobile-device[data-mobile-phone-parallax] {
    position: relative;
    width: min(84vw, 360px, 48svh);
    max-width: calc(100vw - 24px);
    aspect-ratio: 104 / 163.4;
    margin-top: -1svh;
    overflow: visible;
    isolation: isolate;
    contain: layout style;
    perspective: 1500px;
    transform-style: preserve-3d;
  }

  .mobile-phone-orbit {
    position: absolute;
    z-index: -2;
    top: 53%;
    left: 50%;
    width: 112%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(-12deg);
    pointer-events: none;
  }

  .mobile-phone-orbit::before,
  .mobile-phone-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: inherit;
  }

  .mobile-phone-orbit::before { inset: 12%; }
  .mobile-phone-orbit::after { inset: 27%; }

  .mobile-phone-shadow {
    position: absolute;
    z-index: -1;
    top: 86%;
    left: 50%;
    width: 62%;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    filter: blur(21px);
    opacity: var(--shadow-opacity);
    transform:
      translate(calc(-50% + var(--shadow-shift-x)), -50%)
      scaleX(var(--shadow-scale-x));
    pointer-events: none;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    transform:
      translate3d(var(--phone-x), calc(var(--phone-y) - 6svh), 0)
      scale(var(--phone-scale));
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone__canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    outline: 0;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .34));
    backface-visibility: hidden;
    transition: opacity 220ms ease;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone__fallback {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .42));
    backface-visibility: hidden;
    transition: opacity 160ms ease-out;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone--loading .maia-phone__canvas {
    opacity: 0;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone--webgl .maia-phone__fallback {
    opacity: 0;
    pointer-events: none;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone--fallback .maia-phone__canvas {
    display: none;
  }

  .mobile-phone-progress {
    position: absolute;
    z-index: 4;
    top: 48%;
    right: -3px;
    width: 2px;
    height: 80px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    transform: translateY(-50%);
  }

  .mobile-phone-progress span {
    display: block;
    width: 100%;
    height: calc(var(--phone-progress) * 100%);
    border-radius: inherit;
    background: #fff;
  }

  .mobile-device[data-mobile-phone-parallax] .mobile-phone-caption {
    top: calc(100% + 3px);
    width: min(88vw, 390px);
    color: rgba(255, 255, 255, .48);
    font-size: .75rem;
    line-height: 1.35;
    letter-spacing: .025em;
    opacity: var(--phone-caption-opacity, 1);
    will-change: opacity;
  }

  [data-maia-phone-parallax][data-model="static"] .mobile-device[data-mobile-phone-parallax] .maia-phone {
    inset: 2% 11%;
    width: 78%;
    height: 96%;
    overflow: hidden;
    border: 6px solid #07090b;
    border-radius: 44px;
    background: #07090b;
    box-shadow: 0 24px 38px rgba(0, 0, 0, .42);
    transform: none;
  }

  [data-maia-phone-parallax][data-model="static"] .maia-phone__canvas {
    display: none;
  }

  [data-maia-phone-parallax][data-model="static"] .maia-phone__fallback {
    object-fit: cover;
    border-radius: 36px;
    filter: none;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .mobile-device[data-mobile-phone-parallax] {
    width: min(80vw, 340px, 46svh);
    margin-top: 40px;
    transform: none;
  }

  .mobile-phone-orbit,
  .mobile-phone-progress {
    display: none;
  }

  .mobile-device[data-mobile-phone-parallax] .maia-phone {
    will-change: auto;
  }
}

@media (max-width: 700px) and (max-height: 720px) and (prefers-reduced-motion: no-preference) {
  .mobile-device[data-mobile-phone-parallax] {
    width: min(72vw, 300px, 36svh);
  }
}