.image-cube {
    width: 50px;
    height: 50px;
    transform-style: preserve-3d;
    position: relative;
    animation: spin 6s linear infinite reverse;
    /* transform: rotateY(-140deg); */
}

@keyframes spin{
    100%{
        transform: rotateY(360deg);
    }
}

.cube {
    position: absolute;
    z-index: 999;
    bottom: 8px;
    left: 228px;
}

.cube img {
    width: 200px;
    position: absolute;
    top: -53px;
    left: -140px;
    border-radius: 20px 80px 20px 80px;
    box-shadow: 0px 6px 13px rgb(0 0 0 / 50%);
}
@media(max-width: 768px){
    .cube img {
    width: 100px;
    position: absolute;
    top: -38px;
    left: -74px;
    box-shadow: 0px 2px 7px rgb(0 0 0 / 50%);

}
}

.image-cube .div {
    height: 50px;
    width: 50px;
    position: absolute;
    backface-visibility: hidden;
}
.image-cube h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg,#5e0000, red, #5e0000);
    font-size: 40px;
    color: white;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
}
.front {
    position: relative;
    transform: translateZ(30px);
}
.right {
    position: relative;
    transform: rotateY(-270deg) translateX(20px);
    transform-origin: 100% 0;
}
.back {
    position: relative;
    transform: translateZ(-20px) rotateY(180deg);
}
.left {
    position: relative;
    transform: rotateY(270deg) translateX(-20px);
    transform-origin: 0 50%;
}

@media screen and (max-width: 720px) {
    .cube {
        position: absolute;
        z-index: 999;
        bottom: 10px;
        left: 82px;
    }
    
    .image-cube {
        width: 30px;
        height: 30px;
        transform-style: preserve-3d;
        position: relative;
        animation: spin 6s linear infinite reverse;
        /* transform: rotateY(-140deg); */
    }
    .image-cube .div {
        height: 30px;
        width: 30px;
        position: absolute;
        backface-visibility: hidden;
    }
    .front {
        position: relative;
        transform: translateZ(10px);
    }
    .image-cube h1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        background: linear-gradient(45deg,#5e0000, red, #5e0000);
        font-size: 29px;
        color: white;
        transform-style: preserve-3d;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}