/* Estilo básico del contenedor */
    .cube-container {
        width: 30vw;
        height: 32.73889227vw;
        margin: 50px auto;
        perspective: 1000px; /* Establece la perspectiva 3D */
        display: flex;
        justify-items: center;
        justify-content: center;

        /* Estilo del cubo */
        .box {
            display: flex;
            justify-items: center;
            justify-content: center;
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d; /* Permite que el cubo tenga caras en 3D */

            /* Cada una de las 6 caras del cubo */
            .face {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                font-weight: bold;
                color: white;
            }

            /* Posicionando las caras en 3D */
            .front {
                transform: translateZ(10px);
                width: 100%;
                height: 100%;
            } /* Cara frontal */

            .back {
                transform: rotateY(180deg) translateZ(10px);
                width: 100%;
                height: 100%;
            } /* Cara trasera */

            .left {
                transform: rotateY(-90deg) translateZ(15vw);
                width: 20px;
                height: 100%;
            } /* Cara izquierda */

            .right {
                transform: rotateY(90deg) translateZ(15vw);
                width: 16px;
                height: 100%;
            } /* Cara derecha */

            .top {
                transform: rotateX(90deg) translateZ(0px);
                height: 20px;
                width: 100%;
            } /* Cara superior */

            .bottom {
                transform: rotateX(-90deg) translateZ(15vw);
                height: 20px;
                width: 100%;
            } /* Cara inferior */
        }
    }

    .card-container {
        width: 20vw;
        height: 20vw;
        perspective: 1000px; /* Establece la perspectiva 3D */
        display: flex;
        justify-items: center;
        justify-content: center;

        /* Estilo del cubo */
        .box {
            display: flex;
            justify-items: center;
            justify-content: center;
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d; /* Permite que el cubo tenga caras en 3D */

            /* Cada una de las 6 caras del cubo */
            .face {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                font-weight: bold;
                color: white;
            }

            /* Posicionando las caras en 3D */
            .front {
                transform: translateZ(10px);
                width: 100%;
                height: 100%;
            } /* Cara frontal */

            .back {
                transform: rotateY(180deg) translateZ(10px);
                width: 100%;
                height: 100%;
            } /* Cara trasera */

            .left {
                transform: rotateY(-90deg) translateZ(10vw);
                width: 20px;
                height: 100%;
            } /* Cara izquierda */

            .right {
                transform: rotateY(90deg) translateZ(10vw);
                width: 20px;
                height: 100%;
            } /* Cara derecha */

            .top {
                transform: rotateX(90deg) translateZ(0px);
                height: 20px;
                width: 100%;
            } /* Cara superior */

            .bottom {
                transform: rotateX(-90deg) translateZ(10vw);
                height: 20px;
                width: 100%;
            } /* Cara inferior */
        }
    }

@media (max-width:720px) {
    .card-container {
        width: 40vw;
        height: 40vw;
        /* Estilo del cubo */
        .box {
            .left {
                transform: rotateY(-90deg) translateZ(20vw);
            } /* Cara izquierda */

            .right {
                transform: rotateY(90deg) translateZ(20vw);
            } /* Cara derecha */
            .bottom {
                transform: rotateX(-90deg) translateZ(20vw);
            } /* Cara inferior */
        }
    }

}

    /* Cara inferior */

            /* Animación de rotación del cubo 
            @keyframes rotate {
                from {
                    transform: rotateX(0deg) rotateY(0deg);
                }
                to {
                    transform: rotateX(0deg) rotateY(360deg);
                }
            }*/

            /*  <div class="cube-container">
                    <div class="box">
                        <!-- Caras del cubo -->
                        <div class="face front">Frente</div>
                        <div class="face back">Atrás</div>
                        <div class="face left">Izquierda</div>
                        <div class="face right">Derecha</div>
                        <div class="face top">Arriba</div>
                        <div class="face bottom">Abajo</div>
                    </div>
                </div>
            */