.phone {
  position: relative;
  width: 300px;
  height: 350px;
  flex-direction: column;
  margin: auto;
}
/* .phone span {
  position: absolute;
  top: 0;
  left: calc(100% / 35 * var(--i));
  width: calc(100% / 35);
  height: 100%;
}
.phone img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.phone img:nth-child(2),
.phone span:hover + img {
  opacity: 1;
} */

@media (max-width: 350px) {
  .phone {
    width: auto;
    overflow: hidden;
  }
  .phone canvas {
    width: auto;
  }
}