@-webkit-keyframes turn {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 1, 0, 360deg);
            transform: rotate3d(1, 1, 0, 360deg);
  }
}
@keyframes turn {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 1, 0, 360deg);
            transform: rotate3d(1, 1, 0, 360deg);
  }
}
.procube-container {
  -webkit-perspective: 800px;
          perspective: 800px;
  width: var(--cube-size);
  height: var(--cube-size);
  margin: 4rem auto;
}

.procube {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.procube.animate {
  -webkit-animation: turn calc(var(--cube-rotation) * 1s) linear infinite;
          animation: turn calc(var(--cube-rotation) * 1s) linear infinite;
}
.procube.animate:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  cursor: pointer;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: skyblue;
  border: 2px solid black;
  opacity: 0.8;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.face:hover {
  opacity: 1;
  -webkit-transform: var(--original-transform) scale(1.02);
          transform: var(--original-transform) scale(1.02);
  z-index: 1000;
  -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
.face.front {
  -webkit-transform: translateZ(calc(var(--cube-size) / 2));
          transform: translateZ(calc(var(--cube-size) / 2));
}
.face.back {
  -webkit-transform: translateZ(calc(var(--cube-size) / -2)) rotateY(180deg);
          transform: translateZ(calc(var(--cube-size) / -2)) rotateY(180deg);
}
.face.right {
  -webkit-transform: translateX(50%) rotateY(90deg);
          transform: translateX(50%) rotateY(90deg);
}
.face.left {
  -webkit-transform: translateX(-50%) rotateY(-90deg);
          transform: translateX(-50%) rotateY(-90deg);
}
.face.top {
  -webkit-transform: translateY(-50%) rotateX(90deg);
          transform: translateY(-50%) rotateX(90deg);
}
.face.bottom {
  -webkit-transform: translateY(50%) rotateX(-90deg);
          transform: translateY(50%) rotateX(-90deg);
}
.face img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.face .face-link {
  display: contents; /* Makes link fill parent */
}
.face .face-title {
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  text-stroke: 0.5px rgba(0, 0, 0, 0.3);
  position: absolute;
  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
  font-size: var(--cube-title-size) rem;
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-transition: color 0.3s ease, -webkit-transform 0.3s ease;
  transition: color 0.3s ease, -webkit-transform 0.3s ease;
  transition: color 0.3s ease, transform 0.3s ease;
  transition: color 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}