/*======================================
=              GALERÍA
======================================*/

.galeria{

    background:#F8F9FA;

}

.galeria__grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    grid-auto-rows:250px;

}

/*======================================
=            TARJETAS
======================================*/

.galeria__item{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

}

.galeria__alto{

    grid-row:span 2;

}

.galeria__ancho{

    grid-column:span 2;

}

/*======================================
=              IMAGEN
======================================*/

.galeria__item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

/*======================================
=             OVERLAY
======================================*/

.galeria__overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.80),
        rgba(0,0,0,.15),
        transparent
    );

    color:#FFF;

    opacity:0;

    transition:.4s;

}

.galeria__overlay h3{

    margin-bottom:8px;

    font-size:1.5rem;

}

.galeria__overlay span{

    opacity:.85;

}

/*======================================
=              HOVER
======================================*/

@media (hover:hover){

    .galeria__item:hover img{

        transform:scale(1.10);

    }

    .galeria__item:hover .galeria__overlay{

        opacity:1;

    }

}



/*======================================
=      RESPONSIVE GALERÍA
======================================*/

/*======================================
TABLETS
======================================*/

@media (max-width:1024px){

    .galeria__grid{

        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:220px;
        gap:18px;

    }

}


/*======================================
CELULARES
======================================*/

@media (max-width:768px){

    .galeria__grid{

        grid-template-columns:1fr;
        grid-auto-rows:250px;
        gap:18px;

    }

    .galeria__alto{

        grid-row:auto;

    }

    .galeria__ancho{

        grid-column:auto;

    }

    .galeria__overlay{

        opacity:1;
        padding:22px;

        background:linear-gradient(
            to top,
            rgba(0,0,0,.70),
            rgba(0,0,0,.15),
            transparent
        );

    }

}


/*======================================
CELULARES PEQUEÑOS
======================================*/

@media (max-width:480px){

    .galeria__grid{

        grid-auto-rows:220px;
        gap:15px;

    }

    .galeria__item{

        border-radius:15px;

    }

    .galeria__overlay{

        padding:18px;

    }

    .galeria__overlay h3{

        font-size:1.2rem;

    }

    .galeria__overlay span{

        font-size:.90rem;

    }

}