.mobile-anim-wrap {
  --screen-top: 1%;
  --screen-left-mobile: 1%;
  --screen-width-mobile: 98%;
  --screen-height-mobile: 97%;

  --screen-left: 2.9%;
  --screen-width: 94%;
  --screen-height: 98%;

  --screen-radius-mobile: 22px;
  --screen-radius-desktop: 32px;

  --phone-max-w-mobile: 10rem;
  --phone-max-w: 14rem;
}
.mobile-anim-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 3rem 0;
}

.mobile-anim-phone {
  position: relative;
  width: min(100%, var(--phone-max-w-mobile));
  left: 0;
  overflow: hidden;
  contain: paint;
}
.phone-frame {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  z-index: 55;
  position: relative;
}
.screen-viewport {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left-mobile);
  width: var(--screen-width-mobile);
  height: var(--screen-height-mobile);
  overflow: hidden;
  z-index: 1;
  contain: paint;
  border-radius: var(--screen-radius-mobile);
}

.mobile-anim-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: opacity, transform;
  pointer-events: none;
  transform: translateZ(0);
}

@media (min-width: 767px) {
  .mobile-anim-phone {
    width: min(100%, var(--phone-max-w));
  }
  .mobile-anim-wrap {
    padding: 0;
  }
  .screen-viewport {
    left: var(--screen-left);
    width: var(--screen-width);
    height: var(--screen-height);
    border-radius: var(--screen-radius-desktop);
    /* clip-path: inset(0 round var(--screen-radius-desktop)); */
  }
}
@media (min-width: 992px) {
  .mobile-anim-phone {
    left: -2rem;
  }
}