.transition-opacity-out,
.transition-opacity-in {
  --trans-in-dur: 0.5;
  --trans-out-dur: 0.5;
  --trans-del: 0;
}

.transition-opacity-out .cube-3d-side,
.transition-opacity-out.cube-3d-shadow {
  opacity: 1;
  visibility: visible;
  animation: opacity-out calc(var(--trans-out-dur) * 1s) ease-in-out
    calc(var(--trans-del) * 1s) forwards;
}

.transition-opacity-in .cube-3d-side,
.transition-opacity-in.cube-3d-shadow {
  opacity: 0;
  visibility: visible;
  animation: opacity-in calc(var(--trans-in-dur) * 1s) ease-in-out
    calc(var(--trans-del) * 1s) forwards;
}


.transition-opacity-out .cube-3d-side:nth-child( n + 7 ),
.transition-opacity-in .cube-3d-side:nth-child( n + 7 ) {
    display: none;
}

@keyframes opacity-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes opacity-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
