/* =========================
   GALLERY GRID
========================= */

.pg-gallery-grid {
    display: grid;

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

    gap: 20px;
}


.pg-gallery-item {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 3;

    cursor: pointer;
}


.pg-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.pg-gallery-item:hover img {
    transform: scale(1.05);
}


/* =========================
   LIGHTBOX
========================= */

.pg-gallery-lightbox {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    background:
        rgba(0, 0, 0, 0.92);

    z-index: 999999;
}


.pg-gallery-lightbox.active {
    display: flex;
}


/* IMAGE */

.pg-gallery-lightbox-content {
    max-width: 90vw;
    max-height: 90vh;

    text-align: center;
}


#pg-gallery-lightbox-image {
    display: block;

    max-width: 90vw;
    max-height: 82vh;

    width: auto;
    height: auto;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;
}


/* =========================
   CLOSE BUTTON
========================= */

.pg-gallery-close {
    position: absolute;

    top: 20px;
    right: 30px;

    width: 45px;
    height: 45px;

    border: 0;

    background: transparent;

    color: #fff;

    font-size: 40px;

    line-height: 40px;

    cursor: pointer;
}


/* =========================
   PREVIOUS / NEXT
========================= */

.pg-gallery-prev,
.pg-gallery-next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 70px;

    border: 0;

    background:
        rgba(255, 255, 255, 0.15);

    color: #fff;

    font-size: 50px;

    line-height: 50px;

    cursor: pointer;

    border-radius: 4px;
}


.pg-gallery-prev {
    left: 25px;
}


.pg-gallery-next {
    right: 25px;
}


.pg-gallery-prev:hover,
.pg-gallery-next:hover {
    background:
        rgba(255, 255, 255, 0.3);
}


/* =========================
   COUNTER
========================= */

#pg-gallery-counter {
    margin-top: 12px;

    color: #fff;

    font-size: 14px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 980px) {

    .pg-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .pg-gallery-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .pg-gallery-prev,
    .pg-gallery-next {

        width: 40px;
        height: 55px;

        font-size: 40px;
    }


    .pg-gallery-prev {
        left: 8px;
    }


    .pg-gallery-next {
        right: 8px;
    }


    .pg-gallery-close {

        top: 10px;
        right: 15px;

        font-size: 35px;
    }

}