.gallery{
    display: flex;    
    gap: 8px;
    align-items: flex-start;
}
.gal-item{
    cursor: pointer;
    max-height: 380px;
    object-fit: cover;
}
@media (min-width: 1024px){
    .gallery{
        flex-wrap: wrap;                    
        gap: 50px;           
    }
    .gal-item{
        width: 47%;
    }
    
}
@media (max-width: 1023px){
    .gallery{
        flex-direction: column;
        gap: 40px;
    }
    .gal-item{
        width: 100%;
    }
}
.modal{
    width: fit-content !important;
    background: rgba(140, 140, 140, 0) !important;  
    max-width: 80vw !important;    
    box-shadow: none !important;
}
.gal-arrow{    
    cursor: pointer;
    filter: brightness(0) invert(1);
}
@media (max-width: 800px){
    .modal{
        padding-left: 2px !important;
        padding-right: 2px !important;
        width: 100vw !important;
    }
    .modal-content{
        justify-content: center;
    }
    .gal-arrow-left{
        margin-right: 5px;
    }
    .gal-arrow-right{
        margin-left: 5px;
    }
    .gal-arrow{
        height: 25px;
    }
    .btn-close-modal img{
        height: 20px;
    }
}
@media (min-width: 801px){
    .modal-content{
        justify-content: space-between;
    }
    .gal-arrow-left{
        margin-right: 10px;
    }
    .gal-arrow-right{
        margin-left: 10px;
    }
    .gal-arrow{
        height: 50px;
        
        transition: color 0.5s linear;
    }
    .btn-close-modal:hover img{
        filter: invert(47%) sepia(59%) saturate(2995%) hue-rotate(197deg) brightness(103%) contrast(94%);
    }
    .gal-arrow:hover{
        filter: invert(47%) sepia(59%) saturate(2995%) hue-rotate(197deg) brightness(103%) contrast(94%);
    }
}
.blocker{
    background-color: rgb(40, 48, 77, 0.9) !important;
}
.close-modal{
    display: none !important;
}
.btn-close-modal{
    position: absolute;
    right: 0.2%;
    top: 0;
}
.modal-content{
    position: relative;
    display: flex;    
    align-items: center;  
    width: 100%;  
}
.img-expanded{
    display: inline-block;      
    min-width: 0;
    max-width: 100%; 
}