/* Popup background */
.gallery-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

/* Popup content */
.gallery-popup-content {
    width: 90%;
    max-width: 90%;
    position: relative;
    text-align: center;
}

.gallery-popup img.large-img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

/* Close button */
.gallery-close {
    position: absolute;
    /* top: -40px; */
    right: 0;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

/* Arrows */
.gallery-arrow {
    position: absolute;
    top: calc(50% + -50px);
    transform: translateY(-50%);
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    user-select: none;
    z-index: 10;
}

.gallery-arrow.left {
    left: -50px;
}

.gallery-arrow.right {
    right: -50px;
}

/* Thumbnails row */
.gallery-thumbs-wrapper {
    margin-top: 20px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
}

.gallery-thumbs-wrapper::-webkit-scrollbar {
    height: 6px;
}

.gallery-thumbs {
    display: inline-flex;
    gap: 10px;
}

.gallery-thumbs img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    /* opacity: 0.6; */
    cursor: pointer;
    transition: 0.3s;
    border: 2px solid transparent;
    filter: brightness(0.6);
}

.gallery-thumbs img.active {
    opacity: 1;
    border: 2px solid #FFF;
    filter: brightness(1);
}
.gallery-thumbs img:hover{
    filter: brightness(1);
}

/* Page thumbnail grid */
/* .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.gallery-grid img {
    width: 100%;
    cursor: pointer;
    border-radius: 8px;
} */



/* Page thumbnail grid */

.gallery-grid {
    display: grid;
    grid-auto-rows: 150px;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    position: relative;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    border-radius: 0px;
}

.gallery-grid::after {
    position: absolute;
    content: "+ more photos";
    right: 0;
    bottom: 0;
    background: #00000082;
    font-size: 16px;
    color: #FFF;
    padding: 20px;
    pointer-events: none;
}


.gallery-grid img:nth-child(1) {
    grid-area: 1/1/4/3;
}

.gallery-grid img:nth-child(2) {
    grid-area: 1/3/3/5;
}

.gallery-grid img:nth-child(3) {
    grid-area: 3/3/4/5;
}

.gallery-grid img:nth-child(4) {
    grid-area: 1/5/2/6;
}

.gallery-grid img:nth-child(5) {
    grid-area: 1/6/2/7;
}

.gallery-grid img:nth-child(6) {
    grid-area: 2/5/4/7;
}






/* Mobile */

@media (max-width: 767px) {

    .gallery-popup img.large-img {
        max-height: 70vh;
    }

    .gallery-arrow.left {
        left: 10px;
        font-size: 30px;
    }

    .gallery-arrow.right {
        right: 10px;
        font-size: 30px;
    }

    .gallery-close {
        top: -50px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 90px;
        gap: 1px;
    }

    .gallery-grid img:nth-child(1) {
        grid-area: 1/1/3/3;
    }

    .gallery-grid img:nth-child(2) {
        grid-area: 3/1/4/3;
    }

    .gallery-grid img:nth-child(3) {
        grid-area: 4/1/5/2;
    }

    .gallery-grid img:nth-child(4) {
        grid-area: 4/2/5/3;
    }

    .gallery-grid img:nth-child(5) {
        grid-area: 5/1/6/2;
    }

    .gallery-grid img:nth-child(6) {
        grid-area: 5/2/6/3;
    }

    .gallery-grid img.mptop {
        object-position: top;
    }

    .gallery-grid img.mpbot {
        object-position: bottom;
    }

    .gallery-grid::after {
        font-size: 14px;
        padding: 10px;
    }


}

/* Desktop */

@media (min-width: 768px) {
    .gallery-close {
        top: -15px;
    }

    .gallery-thumbs-wrapper::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* Hide scrollbar for Firefox */
    .gallery-thumbs-wrapper {
        scrollbar-width: none;
    }

    /* Still allow scrolling */
    .gallery-thumbs-wrapper {
        overflow: auto;
        /* NOT overflow: hidden */
    }

    .gallery-grid img.dptop {
        object-position: top;
    }

    .gallery-grid img.dpbot {
        object-position: bottom;
    }

}