.scene {
  width: 400px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  perspective: 500px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCubeX 12s infinite linear;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
}

/* Position faces around the X-axis */
.front {
  transform: rotateX(0deg) translateZ(80px);
}
.back {
  transform: rotateX(180deg) translateZ(80px);
}
.top {
  transform: rotateX(-90deg) translateZ(80px);
}
.bottom {
  transform: rotateX(90deg) translateZ(80px);
}

/* Rotate vertically (around X-axis) */
@keyframes rotateCubeX {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(360deg);
  }
}



@media (max-width: 768px) {
  .scene {
      width: 200px;
      height: 50px;
  }
  .front {
    transform: rotateX(0deg) translateZ(30px);
  }
  .back {
    transform: rotateX(180deg) translateZ(30px);
  }
  .top {
    transform: rotateX(-90deg) translateZ(30px);
  }
  .bottom {
    transform: rotateX(90deg) translateZ(30px);
  }
}