:root {
      --primary: #1b2c49;
  }

  .masked-bg {
      -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: cover;
      mask-image: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
      mask-repeat: no-repeat;
      mask-size: cover;
  }

  .scene {
      width: 100%;
      height: 100vh;
      position: relative;
  }

  .cube {
      width: 100%;
      height: 100vh;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 1.2s ease-in-out;
  }

  .cube-face {
      position: absolute;
      width: 100%;
      height: 100vh;

      backface-visibility: hidden;
  }

  .cube-face img {
      width: 100%;
      height: 100vh;

      object-fit: cover;
      filter: brightness(0.7);
  }

  .front {
      transform: rotateY(0deg) translateZ(50vw);
  }

  .right {
      transform: rotateY(90deg) translateZ(50vw);
  }

  .back {
      transform: rotateY(180deg) translateZ(50vw);
  }

  .left {
      transform: rotateY(-90deg) translateZ(50vw);
  }

  @media (max-width: 768px) {

      .front,
      .right,
      .back,
      .left {
          transform: translateZ(45vw);
      }
  }