body.gallery {
    background-color: var(--light);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 20vw, 220px), 1fr));
    gap: clamp(10px, 2vw, 18px);
}

.gallery-item {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 30000;

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

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

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.2s ease;
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-img {
    max-width: min(92vw, 1100px);
    max-height: 88vh;
    object-fit: contain;
    border-radius: 12px;
}

.lightbox-btn,
.lightbox-close {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);

    border-radius: 999px;

    width: 44px;
    height: 44px;

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

}
/* base button look */

.lightbox-btn,
.lightbox-close {
    position: absolute;

    background: var(--dark);
    backdrop-filter: blur(6px);

    border-radius: 999px;
    border: 0;

    width: 44px;
    height: 44px;

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

    color: var(--light);
    cursor: pointer;

    /* transition: background 0.2s ease, transform 0.2s ease; */
}

.lightbox-btn:hover,
.lightbox-close:hover {
    background: var(--accent);
    transition: 500ms;
}


/* close button — top right */

.lightbox-close {
    top: 16px;
    right: 16px;
    font-size: 30px;
}


/* prev / next — sides of screen */

.lightbox-prev,
.lightbox-next {
    font-size: 30px;
    padding-bottom: 7px;
}

.lightbox-prev {
    left: 16px;
}

.lightbox-next {
    right: 16px;
}

@media (max-width: 700px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

        .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 24px;

        transform: none;
    }

    .lightbox-prev {
        left: 50%;
        margin-left: -56px; /* half distance between buttons */
    }

    .lightbox-next {
        right: 50%;
        margin-right: -56px;
    }

}