.cube-area {
        perspective: 1000px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cube {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out;
    }

    .cube-block {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;
        --cube-font-size: 32px;
        --cube-border-color: #fff;
        --cube-border-size: 1px;
        position: relative;
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
        transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        transition: transform 1s ease-in-out;
    }

    .cube-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
    }



    .cube-face {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        border: var(--cube-border-size) solid var(--cube-border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--cube-font-size);
        background: linear-gradient(45deg, rgb(248, 34, 68, 0.6), rgba(243, 3, 43, 0.2));
        color: #fff;
        font-weight: bold;
    }

    .cube-face:nth-child(1) {
        transform: rotateY(0deg) translateZ(var(--cube-face-translate-z));
    }

    .cube-face:nth-child(2) {
        transform: rotateY(90deg) translateZ(var(--cube-face-translate-z));
    }

    .cube-face:nth-child(3) {
        transform: rotateY(180deg) translateZ(var(--cube-face-translate-z));
    }

    .cube-face:nth-child(4) {
        transform: rotateY(-90deg) translateZ(var(--cube-face-translate-z));
    }

    .cube-face:nth-child(5) {
        transform: rotateX(90deg) translateZ(var(--cube-face-translate-z));
    }

    .cube-face:nth-child(6) {
        transform: rotateX(-90deg) translateZ(var(--cube-face-translate-z));
    }


    .cube-rotate {
        --cube-duration: 8s;
        animation: rotateCube var(--cube-duration) infinite linear;
    }

    .cube-rotate-center {
        --cube-duration: 6s;
        animation: rotateCubeCenter var(--cube-duration) infinite linear;
    }

    .cube-duration-1 {
        --cube-duration: 1s;
    }

    .cube-duration-2 {
        --cube-duration: 2s;
    }

    .cube-duration-3 {
        --cube-duration: 3s;
    }

    .cube-duration-4 {
        --cube-duration: 4s;
    }

    .cube-duration-5 {
        --cube-duration: 5s;
    }

    .cube-duration-6 {
        --cube-duration: 6s;
    }

    .cube-duration-7 {
        --cube-duration: 7s;
    }

    .cube-duration-8 {
        --cube-duration: 8s;
    }

    .cube-duration-9 {
        --cube-duration: 9s;
    }

    .cube-duration-10 {
        --cube-duration: 10s;
    }

    .cube-duration-11 {
        --cube-duration: 11s;
    }

    .cube-duration-12 {
        --cube-duration: 12s;
    }

    .cube-size-10 {
        --cube-size: 10px;
        --cube-face-translate-z: 5px;

    }

    .cube-size-20 {
        --cube-size: 20px;
        --cube-face-translate-z: 10px;

    }

    .cube-size-30 {
        --cube-size: 30px;
        --cube-face-translate-z: 15px;

    }

    .cube-size-40 {
        --cube-size: 40px;
        --cube-face-translate-z: 20px;

    }

    .cube-size-50 {
        --cube-size: 50px;
        --cube-face-translate-z: 25px;

    }

    .cube-size-60 {
        --cube-size: 60px;
        --cube-face-translate-z: 30px;

    }

    .cube-size-70 {
        --cube-size: 70px;
        --cube-face-translate-z: 35px;

    }

    .cube-size-80 {
        --cube-size: 80px;
        --cube-face-translate-z: 40px;

    }

    .cube-size-90 {
        --cube-size: 90px;
        --cube-face-translate-z: 45px;

    }

    .cube-size-100 {
        --cube-size: 100px;
        --cube-face-translate-z: 50px;

    }

    .cube-size-110 {
        --cube-size: 110px;
        --cube-face-translate-z: 55px;

    }

    .cube-size-120 {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;

    }

    .cube-size-160 {
        --cube-size: 160px;
        --cube-face-translate-z: 80px;

    }

    .cube-size-180 {
        --cube-size: 180px;
        --cube-face-translate-z: 90px;

    }

    .cube-size-220 {
        --cube-size: 220px;
        --cube-face-translate-z: 110px;

    }

    .cube-size-240 {
        --cube-size: 240px;
        --cube-face-translate-z: 120px;

    }

    .cube-size-260 {
        --cube-size: 260px;
        --cube-face-translate-z: 130px;

    }

    .cube-size-280 {
        --cube-size: 280px;
        --cube-face-translate-z: 140px;

    }

    .cube-size-320 {
        --cube-size: 320px;
        --cube-face-translate-z: 160px;

    }

    .cube-size-360 {
        --cube-size: 360px;
        --cube-face-translate-z: 180px;

    }

    @media (max-width: 2060px) {
        [data-desktop-class~="cube-area"]  {
        perspective: 1000px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    [data-desktop-class~="cube"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out;
    }

    [data-desktop-class~="cube-block"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;
        --cube-font-size: 32px;
        --cube-border-color: #fff;
        --cube-border-size: 1px;
        position: relative;
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
        transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        transition: transform 1s ease-in-out;
    }

    [data-desktop-class~="cube-inner"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
    }



    [data-desktop-class~="cube-face"]  {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        border: var(--cube-border-size) solid var(--cube-border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--cube-font-size);
        background: linear-gradient(45deg, rgb(248, 34, 68, 0.6), rgba(243, 3, 43, 0.2));
        color: #fff;
        font-weight: bold;
    }

    [data-desktop-class~="cube-face"]:nth-child(1)  {
        transform: rotateY(0deg) translateZ(var(--cube-face-translate-z));
    }

    [data-desktop-class~="cube-face"]:nth-child(2)  {
        transform: rotateY(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-desktop-class~="cube-face"]:nth-child(3)  {
        transform: rotateY(180deg) translateZ(var(--cube-face-translate-z));
    }

    [data-desktop-class~="cube-face"]:nth-child(4)  {
        transform: rotateY(-90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-desktop-class~="cube-face"]:nth-child(5)  {
        transform: rotateX(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-desktop-class~="cube-face"]:nth-child(6)  {
        transform: rotateX(-90deg) translateZ(var(--cube-face-translate-z));
    }


    [data-desktop-class~="cube-rotate"]  {
        --cube-duration: 8s;
        animation: rotateCube var(--cube-duration) infinite linear;
    }

    [data-desktop-class~="cube-rotate-center"]  {
        --cube-duration: 6s;
        animation: rotateCubeCenter var(--cube-duration) infinite linear;
    }

    [data-desktop-class~="cube-duration-1"]  {
        --cube-duration: 1s;
    }

    [data-desktop-class~="cube-duration-2"]  {
        --cube-duration: 2s;
    }

    [data-desktop-class~="cube-duration-3"]  {
        --cube-duration: 3s;
    }

    [data-desktop-class~="cube-duration-4"]  {
        --cube-duration: 4s;
    }

    [data-desktop-class~="cube-duration-5"]  {
        --cube-duration: 5s;
    }

    [data-desktop-class~="cube-duration-6"]  {
        --cube-duration: 6s;
    }

    [data-desktop-class~="cube-duration-7"]  {
        --cube-duration: 7s;
    }

    [data-desktop-class~="cube-duration-8"]  {
        --cube-duration: 8s;
    }

    [data-desktop-class~="cube-duration-9"]  {
        --cube-duration: 9s;
    }

    [data-desktop-class~="cube-duration-10"]  {
        --cube-duration: 10s;
    }

    [data-desktop-class~="cube-duration-11"]  {
        --cube-duration: 11s;
    }

    [data-desktop-class~="cube-duration-12"]  {
        --cube-duration: 12s;
    }

    [data-desktop-class~="cube-size-10"]  {
        --cube-size: 10px;
        --cube-face-translate-z: 5px;

    }

    [data-desktop-class~="cube-size-20"]  {
        --cube-size: 20px;
        --cube-face-translate-z: 10px;

    }

    [data-desktop-class~="cube-size-30"]  {
        --cube-size: 30px;
        --cube-face-translate-z: 15px;

    }

    [data-desktop-class~="cube-size-40"]  {
        --cube-size: 40px;
        --cube-face-translate-z: 20px;

    }

    [data-desktop-class~="cube-size-50"]  {
        --cube-size: 50px;
        --cube-face-translate-z: 25px;

    }

    [data-desktop-class~="cube-size-60"]  {
        --cube-size: 60px;
        --cube-face-translate-z: 30px;

    }

    [data-desktop-class~="cube-size-70"]  {
        --cube-size: 70px;
        --cube-face-translate-z: 35px;

    }

    [data-desktop-class~="cube-size-80"]  {
        --cube-size: 80px;
        --cube-face-translate-z: 40px;

    }

    [data-desktop-class~="cube-size-90"]  {
        --cube-size: 90px;
        --cube-face-translate-z: 45px;

    }

    [data-desktop-class~="cube-size-100"]  {
        --cube-size: 100px;
        --cube-face-translate-z: 50px;

    }

    [data-desktop-class~="cube-size-110"]  {
        --cube-size: 110px;
        --cube-face-translate-z: 55px;

    }

    [data-desktop-class~="cube-size-120"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;

    }

    [data-desktop-class~="cube-size-160"]  {
        --cube-size: 160px;
        --cube-face-translate-z: 80px;

    }

    [data-desktop-class~="cube-size-180"]  {
        --cube-size: 180px;
        --cube-face-translate-z: 90px;

    }

    [data-desktop-class~="cube-size-220"]  {
        --cube-size: 220px;
        --cube-face-translate-z: 110px;

    }

    [data-desktop-class~="cube-size-240"]  {
        --cube-size: 240px;
        --cube-face-translate-z: 120px;

    }

    [data-desktop-class~="cube-size-260"]  {
        --cube-size: 260px;
        --cube-face-translate-z: 130px;

    }

    [data-desktop-class~="cube-size-280"]  {
        --cube-size: 280px;
        --cube-face-translate-z: 140px;

    }

    [data-desktop-class~="cube-size-320"]  {
        --cube-size: 320px;
        --cube-face-translate-z: 160px;

    }

    [data-desktop-class~="cube-size-360"]  {
        --cube-size: 360px;
        --cube-face-translate-z: 180px;

    }
}

@media (max-width: 1532px) {
    [data-laptop-class~="cube-area"]  {
        perspective: 1000px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    [data-laptop-class~="cube"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out;
    }

    [data-laptop-class~="cube-block"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;
        --cube-font-size: 32px;
        --cube-border-color: #fff;
        --cube-border-size: 1px;
        position: relative;
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
        transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        transition: transform 1s ease-in-out;
    }

    [data-laptop-class~="cube-inner"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
    }



    [data-laptop-class~="cube-face"]  {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        border: var(--cube-border-size) solid var(--cube-border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--cube-font-size);
        background: linear-gradient(45deg, rgb(248, 34, 68, 0.6), rgba(243, 3, 43, 0.2));
        color: #fff;
        font-weight: bold;
    }

    [data-laptop-class~="cube-face"]:nth-child(1)  {
        transform: rotateY(0deg) translateZ(var(--cube-face-translate-z));
    }

    [data-laptop-class~="cube-face"]:nth-child(2)  {
        transform: rotateY(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-laptop-class~="cube-face"]:nth-child(3)  {
        transform: rotateY(180deg) translateZ(var(--cube-face-translate-z));
    }

    [data-laptop-class~="cube-face"]:nth-child(4)  {
        transform: rotateY(-90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-laptop-class~="cube-face"]:nth-child(5)  {
        transform: rotateX(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-laptop-class~="cube-face"]:nth-child(6)  {
        transform: rotateX(-90deg) translateZ(var(--cube-face-translate-z));
    }


    [data-laptop-class~="cube-rotate"]  {
        --cube-duration: 8s;
        animation: rotateCube var(--cube-duration) infinite linear;
    }

    [data-laptop-class~="cube-rotate-center"]  {
        --cube-duration: 6s;
        animation: rotateCubeCenter var(--cube-duration) infinite linear;
    }

    [data-laptop-class~="cube-duration-1"]  {
        --cube-duration: 1s;
    }

    [data-laptop-class~="cube-duration-2"]  {
        --cube-duration: 2s;
    }

    [data-laptop-class~="cube-duration-3"]  {
        --cube-duration: 3s;
    }

    [data-laptop-class~="cube-duration-4"]  {
        --cube-duration: 4s;
    }

    [data-laptop-class~="cube-duration-5"]  {
        --cube-duration: 5s;
    }

    [data-laptop-class~="cube-duration-6"]  {
        --cube-duration: 6s;
    }

    [data-laptop-class~="cube-duration-7"]  {
        --cube-duration: 7s;
    }

    [data-laptop-class~="cube-duration-8"]  {
        --cube-duration: 8s;
    }

    [data-laptop-class~="cube-duration-9"]  {
        --cube-duration: 9s;
    }

    [data-laptop-class~="cube-duration-10"]  {
        --cube-duration: 10s;
    }

    [data-laptop-class~="cube-duration-11"]  {
        --cube-duration: 11s;
    }

    [data-laptop-class~="cube-duration-12"]  {
        --cube-duration: 12s;
    }

    [data-laptop-class~="cube-size-10"]  {
        --cube-size: 10px;
        --cube-face-translate-z: 5px;

    }

    [data-laptop-class~="cube-size-20"]  {
        --cube-size: 20px;
        --cube-face-translate-z: 10px;

    }

    [data-laptop-class~="cube-size-30"]  {
        --cube-size: 30px;
        --cube-face-translate-z: 15px;

    }

    [data-laptop-class~="cube-size-40"]  {
        --cube-size: 40px;
        --cube-face-translate-z: 20px;

    }

    [data-laptop-class~="cube-size-50"]  {
        --cube-size: 50px;
        --cube-face-translate-z: 25px;

    }

    [data-laptop-class~="cube-size-60"]  {
        --cube-size: 60px;
        --cube-face-translate-z: 30px;

    }

    [data-laptop-class~="cube-size-70"]  {
        --cube-size: 70px;
        --cube-face-translate-z: 35px;

    }

    [data-laptop-class~="cube-size-80"]  {
        --cube-size: 80px;
        --cube-face-translate-z: 40px;

    }

    [data-laptop-class~="cube-size-90"]  {
        --cube-size: 90px;
        --cube-face-translate-z: 45px;

    }

    [data-laptop-class~="cube-size-100"]  {
        --cube-size: 100px;
        --cube-face-translate-z: 50px;

    }

    [data-laptop-class~="cube-size-110"]  {
        --cube-size: 110px;
        --cube-face-translate-z: 55px;

    }

    [data-laptop-class~="cube-size-120"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;

    }

    [data-laptop-class~="cube-size-160"]  {
        --cube-size: 160px;
        --cube-face-translate-z: 80px;

    }

    [data-laptop-class~="cube-size-180"]  {
        --cube-size: 180px;
        --cube-face-translate-z: 90px;

    }

    [data-laptop-class~="cube-size-220"]  {
        --cube-size: 220px;
        --cube-face-translate-z: 110px;

    }

    [data-laptop-class~="cube-size-240"]  {
        --cube-size: 240px;
        --cube-face-translate-z: 120px;

    }

    [data-laptop-class~="cube-size-260"]  {
        --cube-size: 260px;
        --cube-face-translate-z: 130px;

    }

    [data-laptop-class~="cube-size-280"]  {
        --cube-size: 280px;
        --cube-face-translate-z: 140px;

    }

    [data-laptop-class~="cube-size-320"]  {
        --cube-size: 320px;
        --cube-face-translate-z: 160px;

    }

    [data-laptop-class~="cube-size-360"]  {
        --cube-size: 360px;
        --cube-face-translate-z: 180px;

    }
}


@media (max-width: 1148px) {
        [data-tablet-class~="cube-area"]  {
        perspective: 1000px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    [data-tablet-class~="cube"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out;
    }

    [data-tablet-class~="cube-block"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;
        --cube-font-size: 32px;
        --cube-border-color: #fff;
        --cube-border-size: 1px;
        position: relative;
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
        transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        transition: transform 1s ease-in-out;
    }

    [data-tablet-class~="cube-inner"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
    }



    [data-tablet-class~="cube-face"]  {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        border: var(--cube-border-size) solid var(--cube-border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--cube-font-size);
        background: linear-gradient(45deg, rgb(248, 34, 68, 0.6), rgba(243, 3, 43, 0.2));
        color: #fff;
        font-weight: bold;
    }

    [data-tablet-class~="cube-face"]:nth-child(1)  {
        transform: rotateY(0deg) translateZ(var(--cube-face-translate-z));
    }

    [data-tablet-class~="cube-face"]:nth-child(2)  {
        transform: rotateY(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-tablet-class~="cube-face"]:nth-child(3)  {
        transform: rotateY(180deg) translateZ(var(--cube-face-translate-z));
    }

    [data-tablet-class~="cube-face"]:nth-child(4)  {
        transform: rotateY(-90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-tablet-class~="cube-face"]:nth-child(5)  {
        transform: rotateX(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-tablet-class~="cube-face"]:nth-child(6)  {
        transform: rotateX(-90deg) translateZ(var(--cube-face-translate-z));
    }


    [data-tablet-class~="cube-rotate"]  {
        --cube-duration: 8s;
        animation: rotateCube var(--cube-duration) infinite linear;
    }

    [data-tablet-class~="cube-rotate-center"]  {
        --cube-duration: 6s;
        animation: rotateCubeCenter var(--cube-duration) infinite linear;
    }

    [data-tablet-class~="cube-duration-1"]  {
        --cube-duration: 1s;
    }

    [data-tablet-class~="cube-duration-2"]  {
        --cube-duration: 2s;
    }

    [data-tablet-class~="cube-duration-3"]  {
        --cube-duration: 3s;
    }

    [data-tablet-class~="cube-duration-4"]  {
        --cube-duration: 4s;
    }

    [data-tablet-class~="cube-duration-5"]  {
        --cube-duration: 5s;
    }

    [data-tablet-class~="cube-duration-6"]  {
        --cube-duration: 6s;
    }

    [data-tablet-class~="cube-duration-7"]  {
        --cube-duration: 7s;
    }

    [data-tablet-class~="cube-duration-8"]  {
        --cube-duration: 8s;
    }

    [data-tablet-class~="cube-duration-9"]  {
        --cube-duration: 9s;
    }

    [data-tablet-class~="cube-duration-10"]  {
        --cube-duration: 10s;
    }

    [data-tablet-class~="cube-duration-11"]  {
        --cube-duration: 11s;
    }

    [data-tablet-class~="cube-duration-12"]  {
        --cube-duration: 12s;
    }

    [data-tablet-class~="cube-size-10"]  {
        --cube-size: 10px;
        --cube-face-translate-z: 5px;

    }

    [data-tablet-class~="cube-size-20"]  {
        --cube-size: 20px;
        --cube-face-translate-z: 10px;

    }

    [data-tablet-class~="cube-size-30"]  {
        --cube-size: 30px;
        --cube-face-translate-z: 15px;

    }

    [data-tablet-class~="cube-size-40"]  {
        --cube-size: 40px;
        --cube-face-translate-z: 20px;

    }

    [data-tablet-class~="cube-size-50"]  {
        --cube-size: 50px;
        --cube-face-translate-z: 25px;

    }

    [data-tablet-class~="cube-size-60"]  {
        --cube-size: 60px;
        --cube-face-translate-z: 30px;

    }

    [data-tablet-class~="cube-size-70"]  {
        --cube-size: 70px;
        --cube-face-translate-z: 35px;

    }

    [data-tablet-class~="cube-size-80"]  {
        --cube-size: 80px;
        --cube-face-translate-z: 40px;

    }

    [data-tablet-class~="cube-size-90"]  {
        --cube-size: 90px;
        --cube-face-translate-z: 45px;

    }

    [data-tablet-class~="cube-size-100"]  {
        --cube-size: 100px;
        --cube-face-translate-z: 50px;

    }

    [data-tablet-class~="cube-size-110"]  {
        --cube-size: 110px;
        --cube-face-translate-z: 55px;

    }

    [data-tablet-class~="cube-size-120"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;

    }

    [data-tablet-class~="cube-size-160"]  {
        --cube-size: 160px;
        --cube-face-translate-z: 80px;

    }

    [data-tablet-class~="cube-size-180"]  {
        --cube-size: 180px;
        --cube-face-translate-z: 90px;

    }

    [data-tablet-class~="cube-size-220"]  {
        --cube-size: 220px;
        --cube-face-translate-z: 110px;

    }

    [data-tablet-class~="cube-size-240"]  {
        --cube-size: 240px;
        --cube-face-translate-z: 120px;

    }

    [data-tablet-class~="cube-size-260"]  {
        --cube-size: 260px;
        --cube-face-translate-z: 130px;

    }

    [data-tablet-class~="cube-size-280"]  {
        --cube-size: 280px;
        --cube-face-translate-z: 140px;

    }

    [data-tablet-class~="cube-size-320"]  {
        --cube-size: 320px;
        --cube-face-translate-z: 160px;

    }

    [data-tablet-class~="cube-size-360"]  {
        --cube-size: 360px;
        --cube-face-translate-z: 180px;

    }
}

@media (max-width: 766px) {
        [data-mobile-class~="cube-area"]  {
        perspective: 1000px;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    [data-mobile-class~="cube"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: top 2s ease-in-out, left 2s ease-in-out, transform 2s ease-in-out;
    }

    [data-mobile-class~="cube-block"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;
        --cube-font-size: 32px;
        --cube-border-color: #fff;
        --cube-border-size: 1px;
        position: relative;
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
        transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        transition: transform 1s ease-in-out;
    }

    [data-mobile-class~="cube-inner"]  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--cube-size);
        height: var(--cube-size);
        transform-style: preserve-3d;
    }



    [data-mobile-class~="cube-face"]  {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        border: var(--cube-border-size) solid var(--cube-border-color);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--cube-font-size);
        background: linear-gradient(45deg, rgb(248, 34, 68, 0.6), rgba(243, 3, 43, 0.2));
        color: #fff;
        font-weight: bold;
    }

    [data-mobile-class~="cube-face"]:nth-child(1)  {
        transform: rotateY(0deg) translateZ(var(--cube-face-translate-z));
    }

    [data-mobile-class~="cube-face"]:nth-child(2)  {
        transform: rotateY(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-mobile-class~="cube-face"]:nth-child(3)  {
        transform: rotateY(180deg) translateZ(var(--cube-face-translate-z));
    }

    [data-mobile-class~="cube-face"]:nth-child(4)  {
        transform: rotateY(-90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-mobile-class~="cube-face"]:nth-child(5)  {
        transform: rotateX(90deg) translateZ(var(--cube-face-translate-z));
    }

    [data-mobile-class~="cube-face"]:nth-child(6)  {
        transform: rotateX(-90deg) translateZ(var(--cube-face-translate-z));
    }


    [data-mobile-class~="cube-rotate"]  {
        --cube-duration: 8s;
        animation: rotateCube var(--cube-duration) infinite linear;
    }

    [data-mobile-class~="cube-rotate-center"]  {
        --cube-duration: 6s;
        animation: rotateCubeCenter var(--cube-duration) infinite linear;
    }

    [data-mobile-class~="cube-duration-1"]  {
        --cube-duration: 1s;
    }

    [data-mobile-class~="cube-duration-2"]  {
        --cube-duration: 2s;
    }

    [data-mobile-class~="cube-duration-3"]  {
        --cube-duration: 3s;
    }

    [data-mobile-class~="cube-duration-4"]  {
        --cube-duration: 4s;
    }

    [data-mobile-class~="cube-duration-5"]  {
        --cube-duration: 5s;
    }

    [data-mobile-class~="cube-duration-6"]  {
        --cube-duration: 6s;
    }

    [data-mobile-class~="cube-duration-7"]  {
        --cube-duration: 7s;
    }

    [data-mobile-class~="cube-duration-8"]  {
        --cube-duration: 8s;
    }

    [data-mobile-class~="cube-duration-9"]  {
        --cube-duration: 9s;
    }

    [data-mobile-class~="cube-duration-10"]  {
        --cube-duration: 10s;
    }

    [data-mobile-class~="cube-duration-11"]  {
        --cube-duration: 11s;
    }

    [data-mobile-class~="cube-duration-12"]  {
        --cube-duration: 12s;
    }

    [data-mobile-class~="cube-size-10"]  {
        --cube-size: 10px;
        --cube-face-translate-z: 5px;

    }

    [data-mobile-class~="cube-size-20"]  {
        --cube-size: 20px;
        --cube-face-translate-z: 10px;

    }

    [data-mobile-class~="cube-size-30"]  {
        --cube-size: 30px;
        --cube-face-translate-z: 15px;

    }

    [data-mobile-class~="cube-size-40"]  {
        --cube-size: 40px;
        --cube-face-translate-z: 20px;

    }

    [data-mobile-class~="cube-size-50"]  {
        --cube-size: 50px;
        --cube-face-translate-z: 25px;

    }

    [data-mobile-class~="cube-size-60"]  {
        --cube-size: 60px;
        --cube-face-translate-z: 30px;

    }

    [data-mobile-class~="cube-size-70"]  {
        --cube-size: 70px;
        --cube-face-translate-z: 35px;

    }

    [data-mobile-class~="cube-size-80"]  {
        --cube-size: 80px;
        --cube-face-translate-z: 40px;

    }

    [data-mobile-class~="cube-size-90"]  {
        --cube-size: 90px;
        --cube-face-translate-z: 45px;

    }

    [data-mobile-class~="cube-size-100"]  {
        --cube-size: 100px;
        --cube-face-translate-z: 50px;

    }

    [data-mobile-class~="cube-size-110"]  {
        --cube-size: 110px;
        --cube-face-translate-z: 55px;

    }

    [data-mobile-class~="cube-size-120"]  {
        --cube-size: 120px;
        --cube-face-translate-z: 60px;

    }

    [data-mobile-class~="cube-size-160"]  {
        --cube-size: 160px;
        --cube-face-translate-z: 80px;

    }

    [data-mobile-class~="cube-size-180"]  {
        --cube-size: 180px;
        --cube-face-translate-z: 90px;

    }

    [data-mobile-class~="cube-size-220"]  {
        --cube-size: 220px;
        --cube-face-translate-z: 110px;

    }

    [data-mobile-class~="cube-size-240"]  {
        --cube-size: 240px;
        --cube-face-translate-z: 120px;

    }

    [data-mobile-class~="cube-size-260"]  {
        --cube-size: 260px;
        --cube-face-translate-z: 130px;

    }

    [data-mobile-class~="cube-size-280"]  {
        --cube-size: 280px;
        --cube-face-translate-z: 140px;

    }

    [data-mobile-class~="cube-size-320"]  {
        --cube-size: 320px;
        --cube-face-translate-z: 160px;

    }

    [data-mobile-class~="cube-size-360"]  {
        --cube-size: 360px;
        --cube-face-translate-z: 180px;

    }
}