.grid{
    display:grid;

    grid-template-columns: 1fr 1fr 1fr ;
    grid-gap: 30px;

    grid-template-rows: 358px;

    grid-template-areas: 
    'grid-0 grid-1 grid-2 ';
}

.grid2{
    display:grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px;

    grid-template-rows: 288px ;

    grid-template-areas: 
    'grid-0 grid-1 grid-2 grid-3';
}


@media screen and (max-width: 800px) {
    .grid{
        grid-gap: 10px;
    
        grid-template-rows: 100px 100px 100px;

    }
} 

.grid-item{
    display:block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.grid-item:hover{
    transform:scale(1.05);
    transition: all 0.3s ease;
}
.grid-0{
    grid-area: grid-0 ;
}

.grid-1{
    grid-area:grid-1;
}

.grid-2{
    grid-area:grid-2;
}

.grid-3{
    grid-area:grid-3;
}

.grid-4{
    grid-area:grid-4;
}

.grid-5{
    grid-area:grid-5;
}

.grid-6{
    grid-area:grid-6;
}

.grid-7{
    grid-area:grid-7;
}

.grid-8{
    grid-area:grid-8;
}

.grid-9{
    grid-area:grid-9;
}

.grid-10{
    grid-area:grid-10;
}

.grid-11{
    grid-area:grid-11;
}


/*
.overlay-galeria{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
    z-index:99999;
    display:flex;
    justify-content: center;
    align-items: center;
    transition: all .7s ease;
    visibility:hidden;
    opacity:0; 
}

.overlay-galeria .slideshow{
    width:90%;
    height:90%;
    background-color: rgba(255,255,255, .9);
    color:#000;
    position:relative;
    display:flex;
    justify-content: center;

}

.slideshow img{
    height:100%;
    width:100%;
    object-fit:contain; /*  para que no se deforme la imagen  */
/* }

.btn-cerrar{
    position:absolute;
    top:-15px;
    right:-15px;
    font-size:25px;
    background-color: rgba(0,0,0, .7);
    color:white;
    width:30px;
    height:30px;
    border-radius: 50%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:5px;
    cursor:pointer;
}
*/
.botones{
    width:70px;
    height:70px;
    border-radius: 50%;
    color:#000;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    position:absolute;
    top:50%;
    transform: translateY(-50%); /* siempre va a estar a la mitad vertical del contenedor*/
    cursor:pointer;
    color:white;
    z-index: 9999999999999;
}

.atras{
    left:-80px;
}

.adelante{
    right:-80px;
}

/* .botones i{
    pointer-events: none;
} */

@media screen and (max-width: 800px) {
    .botones{
        font-size: 55px;
    }

    .atras{
        left:5px;
    }
    .adelante{
        right:5px;
    }
/*
    .slideshow img{
        width:98%;
    }*/
}