main .grid {
    display: grid;
    width: 90%;
    grid-template-columns: 25vw 25vw 25vw;
    grid-template-rows: auto;
    column-gap: 5vw;
    margin-top: 30lvh;
    row-gap: 10lvh;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;



    & .card, article  {

        
        display: flex;
        flex-direction: column;
        height: max-content;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 10px 10px rgb(53, 53, 53);

        text-align: center;

        background-image: url("../images/maul1.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position-x: center;

        transform: rotateX(10deg) rotateY(25deg);
        
        
        height: 25vw;
        width: 25vw;
        padding: 10px;

        border-radius: 15px;
        transition: 0.5s;
    
        
        &:hover {
            cursor: pointer;
            transform: rotateX(10deg);
        }


        & .box {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            & h2 {
                font-family: 'Star-wars', sans-serif;
                letter-spacing: 2px;
                width: 80%;

                & span {
                    font-family: serif;
                    font-weight: bolder;
                    font-size: 1.7rem;
                }
            }
        }

        &#SW1 {
            background-image: url('assets/backgrounds/movies/SW1.jpg');
        }

        &#SW2 {
            background-image: url('assets/backgrounds/movies/sw2.jpg');
        }

        &#SW3 {
            background-image: url('assets/backgrounds/movies/SW3C.png');
        }

        &#SW4 {
            background-image: url('assets/backgrounds/movies/SW4.jpg');
        }

        &#SW5 {
            background-image: url('assets/backgrounds/movies/SW5.jpg');
        }

        &#SW6 {
            background-image: url('assets/backgrounds/movies/SW6.jpg');
        }

        &#SWRO {
            background-image: url('assets/backgrounds/movies/SWRO.jpg');
        }

        &#SWS {
            background-image: url('assets/backgrounds/movies/SWS.jpg');
        }
    }

}