#gallery-component {
    width:100%;
}


.gallery-section {
    margin-bottom:80px;
}


.gallery-header {
    margin-bottom:30px;
}


.gallery-header h2 {
    font-size:2rem;
    font-weight:700;
    margin-bottom:10px;
}


.gallery-header p {
    color:#666;
    max-width:800px;
    line-height:1.6;
}



/* Gallery grid */

.gallery-grid {

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(280px,1fr));

    gap:20px;
}



.gallery-item {

    border:0;
    padding:0;
    cursor:pointer;

    overflow:hidden;

    border-radius:18px;

    background:#eee;

}



.gallery-item img {

    width:100%;
    height:260px;

    object-fit:cover;

    display:block;

    transition:
        transform .4s ease,
        filter .4s ease;
}



.gallery-item:hover img {

    transform:scale(1.08);

    filter:
        brightness(.85);
}





/* Lightbox */

.gallery-lightbox {

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.92);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999;
}



.gallery-lightbox.active {

    display:flex;
}



.gallery-lightbox-image {

    max-width:90vw;

    max-height:85vh;

    object-fit:contain;

    border-radius:12px;
}



.gallery-close,
.gallery-prev,
.gallery-next {

    position:absolute;

    background:none;

    border:0;

    color:white;

    font-size:50px;

    cursor:pointer;

}



.gallery-close {

    top:20px;

    right:30px;
}



.gallery-prev {

    left:30px;
}



.gallery-next {

    right:30px;
}



.gallery-counter {

    position:absolute;

    bottom:25px;

    color:white;

    font-size:18px;
}