/*==================================*/
/* Gallery Section */
/*==================================*/

.section-gallery{
    margin-bottom: 1.5em;
    /* background-color: var(--light-gray); */
}

.gallery-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.2em;
    margin:1em 0;
}

.filter-btn{
    padding:.5em 1em;
    border: none;
    border-right: 1px solid var(--ashy);
    background:var(--white);
    cursor:pointer;
    
}

.filter-btn i {
    margin-right: .3em;
}

.filter-btn.active{
    background:var(--deepgreen);
    color:var(--white);
}

.gallery-grid{
    display:flex;
    flex-direction:column;
    gap:1em;
}

.gallery-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--ashy);
    cursor:pointer;
}

.gallery-card img{
    width:100%;
    height:50vh;
    object-fit:contain;
    transition:transform .4s ease, filter .4s ease;
}

.gallery-card:hover img{
    transform:scale(1.1);
    filter:brightness(60%);
}

.gallery-overlay{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:1em;
    color:var(--white);
    background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
    background:linear-gradient(to top, var(--transparent-green), transparent);
    background-color: var(--transparent-green);
    /* background-color: var(--lightgreen); */
}

.gallery-overlay h3{
    /* margin-bottom:.2em; */
    font-weight: lighter;
}

.gallery-overlay p{
    font-size: clamp(.4rem, .3rem + 1vw, 1rem);
}


/*==================================*/
/* Modal */
/*==================================*/

.gallery-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999;
}

.modal-content{
    width:90%;
    max-width:900px;
    background:var(--white);
    padding:1em;
    
}


.modal-content iframe{
    width:100%;
    height:60vh;
    object-fit:cover;
}

.modal-content img {
    width:100%;
    height:60vh;
    object-fit:contain;
}

.modal-caption{
    margin-top:1em;
}

.modal-close{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:white;
    cursor:pointer;
}


/*==================================*/
/* Tablet */
/*==================================*/

@media(min-width:768px){

.gallery-grid{
    flex-direction:row;
    flex-wrap:wrap;
}

.gallery-card{
    width:48%;
}

}


/*==================================*/
/* Desktop */
/*==================================*/

@media(min-width:1024px){

.gallery-card{
    width:31%;
}

.modal-content{
    width:70%;
}

}