.box-group, .box-group *{
    transition: .45s cubic-bezier(0.85, 0, 0, 0.85);
}

.box{
    transform-style: preserve-3d;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.box-group{
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateX(-35.27deg) rotateY(45deg);
}

.face{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.box-border .face{
    border: 1.5px solid rgba(229, 7, 30, .8);
    backface-visibility: hidden;
}

.box-border .face.left,
.box-border .face.right,
.box-border .face.front,
.box-border .face.back{
    border-top-width: 0.5px;
}


.box-border[data-degree="0"] .face.top{ border-bottom-width: 0.5px; border-left-width: 0.5px; }
.box-border[data-degree="0"] .face.left{ border-right-width:0.5px; }
.box-border[data-degree="0"] .face.front{ border-left-width: 0.5px; }

.box-border[data-degree="90"] .face.top{ border-top-width: 0.5px; border-left-width: 0.5px; }
.box-border[data-degree="90"] .face.back{ border-right-width:0.5px; }
.box-border[data-degree="90"] .face.left{ border-left-width: 0.5px; }

.box-border[data-degree="180"] .face.top{ border-right-width: 0.5px; border-top-width: 0.5px; }
.box-border[data-degree="180"] .face.right{ border-right-width:0.5px; }
.box-border[data-degree="180"] .face.back{ border-left-width: 0.5px; border-bottom-width: 0.5px; }

.box-border[data-degree="270"] .face.top{ border-bottom-width: 0.5px; border-right-width: 0.5px; }
.box-border[data-degree="270"] .face.front{ border-right-width:0.5px; }
.box-border[data-degree="270"] .face.right{ border-left-width: 0.5px; }

.box-inner .face{
    background: linear-gradient(to left bottom, #944e59, #642020 75%);
}

.no-transition{
    transition: 0s;
}