body {
        margin: 0;
        padding: 0;
        font-family: 'Raleway', sans-serif;
    }
    
    .one-slider {
        overflow: hidden;
    }
    
    .one-slider figure {
        object-fit: cover;
        position: relative;
        max-width: 100vw;
        max-height: 65vh;
        margin: 0;
        left: 0;
    }
    
    .one-slider figure img {
        width: 100%;
        max-width: 100vw;
    }
    
    
    p {
        font-family: 'Raleway', sans-serif;
        font-weight: 300;
    }
    
    h2 {
        font-family: 'Raleway', sans-serif;
        font-weight: 900;
        /* color: #008993; */
        text-align: center;
    }
    
    #sala-videos {
        color: #212121;
        height: 100%;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 1200px;
        padding: 20px;
        display: inherit;
        text-align: center;
    }
    
    
    
    /* ------------------------------------- THE LIGHTBOX ------------------------------------- */
    
    .container-grid-vid {
        display: grid;
        height: 150vh;
        grid-template-columns: repeat(6, 1fr);
        /* grid-template-rows: repeat(5, 1fr); */
        grid-template-areas:
        "vid1 vid1 vid1 vid2 vid2 vid2"
        "vid1 vid1 vid1 vid2 vid2 vid2"
        "vid4 vid4 vid4 vid3 vid3 vid3"
        "vid4 vid4 vid4 vid3 vid3 vid3"
        "vid5 vid5 vid6 vid6 vid7 vid7"
        "vid5 vid5 vid6 vid6 vid7 vid7";
        gap: 15px;
    }

    .container-grid-vid-22 {
        display: grid;
        height: 150vh;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: repeat(5, 1fr); */
        grid-template-areas:
        "vid1 vid1 vid1"
        "vid1 vid1 vid1"
        "vid2 vid3 vid4"
        "vid5 vid6 vid7"
        "vid8 vid9 vid10";
        gap: 15px;
    }

    .container-grid-vid-23 {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
        grid-template-areas: 
        "vid1 vid1 vid1 vid1"
        "vid2 vid2 vid3 vid3"
        "vid4 vid4 vid5 vid5"
        "vid6 vid6 vid6 vid6"
        "vid7 vid7 vid8 vid8"
        ;
        
        & iframe {
            min-height: 350px;
        }
    }
    
    .vid {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .vid:hover {
        filter: grayscale(50%);
        cursor: pointer;
        transition: filter .5s;
    }
    
    .vid-1 {
        grid-area: vid1;
    }
    .vid-2 {
        grid-area: vid2;
    }
    .vid-3 {
        grid-area: vid3;
    }
    .vid-4 {
        grid-area: vid4;
    }
    .vid-5 {
        grid-area: vid5;
    }
    .vid-6 {
        grid-area: vid6;
    }
    .vid-7 {
        grid-area: vid7;
    }
    .vid-8 {
        grid-area: vid8;
    }
    .vid-9 {
        grid-area: vid9;
    }
    .vid-10 {
        grid-area: vid10;
    }
    
    
    
    /* --------------------- RESPONSIVE --------------------- */
    @media screen and (max-width: 1150px) {
        .logo-sala {
        margin-top: 180px;
        }
    }
    
    
    @media screen and (max-width: 800px) {
        .logo-sala {
        max-width: 60%;
        left: 20%;
        right: 20%;
        margin-top: 50px;
        }
        .img-show {
        height: auto;
        }
    
        .container-grid-vid {
        grid-template-columns: 50% 50%;
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas:
        "vid1 vid2"
        "vid3 vid4"
        "vid5 vid6"
        "vid7 vid8";
        }
    }