.template-grip-login {
    width: 100%;
    height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.scene {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 700px;
    z-index: 0;
}

.cube-1 {
    left: -2%;
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 20s linear infinite;
}

.cube-2 {
    top: 80%;
    left: 90%;
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 20s linear infinite;
}

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

.front-100 {
    background: rgba(162,224,224,.9);
    transform: translateZ(50px);
}

.back-100 {
    background: rgba(120,205,205,.9);
    transform: translateZ(-50px);
}

.right-100 {
    background: rgba(90,180,180,.9);
    transform: translateX(50px) rotateY(90deg);
}

.left-100 {
    background: rgba(55,121,124,.9);
    transform: translateX(-50px) rotateY(-90deg);
}

.top-100 {
    background: rgba(7,60,73,.9);
    transform: translateY(-50px) rotateX(90deg);
}

.bottom-100 {
    background: rgba(30,140,145,.9);
    transform: translateY(50px) rotateX(-90deg);
}

@keyframes rotateCube {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Media Queries */

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .template-grip-login {
        grid-template-columns: 1fr;
    }

    #loginScene {
        display: none;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {
    
}

/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {}

/* Extra extra large devices (extra large desktops, 1400px and up) */
@media (max-width: 1400px) {}