// Thanks to https://3dtransforms.desandro.com/cube
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #000;
  overflow-y: hidden;
}

.scene {
  width: 200px;
  height: 200px;

  .scene__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
  }
}

.cube {
  --cube-width: 200px;

  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(70deg) rotateZ(60deg);

  .cube__face {
    position: absolute;
    width: var(--cube-width);
    height: var(--cube-width);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);

    .cube__face__bg {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .cube__face--front {
    transform: rotateY(0deg) translateZ(calc(var(--cube-width) / 2));

    .cube__face__bg {
      transform: rotateZ(0.75turn);
    }
  }

  .cube__face--right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));

    .cube__face__bg {
      transform: rotateZ(-0.25turn);
    }
  }

  .cube__face--back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2));
  }

  .cube__face--left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
  }

  .cube__face--top {
    transform: rotateX(90deg) translateZ(calc(var(--cube-width) / 2));
  }

  .cube__face--bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-width) / 2));
  }
}
