/* ==========================================
   Grid Gallery Variables
========================================== */

.gg-container {
    --main-color: #000;
    --secondary-color: #111;
    --txt-color: #fff;
	--bg-color: #0f0f0f;

    --img-bg-color: rgba(240, 240, 240, 0.9);
    --backdrop-color: #0f0f0f;

    --gap-length: 20px;
    --row-height: 100px;
    --column-width: 100px;
}

/* Dark Theme */

.gg-container *[data-theme="dark"] {
    --main-color: #ddd;
    --secondary-color: #eee;
    --txt-color: #111;

    --img-bg-color: rgba(20, 20, 20, 0.9);
    --backdrop-color: rgba(30, 30, 30, 0.9);
}

/* ==========================================
   Gallery Grid
========================================== */

.gg-box {
    display: grid;
 
	grid-template-columns: auto auto auto;
    grid-auto-rows: var(--row-height);
    grid-gap: var(--gap-length);

    margin: 20px 0;
}

.gg-box img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    cursor: pointer;

    background: var(--img-bg-color);
}

.gg-box img:hover {
    opacity: 0.98;
}

/* ==========================================
   Lightbox
========================================== */

#gg-screen {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: var(--backdrop-color);

    text-align: center;
    z-index: 9999;
}

#gg-screen .gg-image {
    display: inline-flex;

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

    height: 100%;
}

#gg-screen .gg-image img {
    max-width: 100%;
    max-height: 100%;

    margin: 0 auto;
}

/* ==========================================
   Navigation Buttons
========================================== */

.gg-btn {
    position: fixed;
    bottom: 10px;

    width: 35px;
    height: 35px;

    box-sizing: border-box;
    padding-left: 2px;

    background: var(--main-color);
    color: var(--txt-color);

    text-align: center;
    line-height: 35px;
    font-size: 20px;

    cursor: pointer;

    transition: all 0.4s ease;
}

.gg-btn:hover {
    background: var(--secondary-color);
}

/* Close Button */

.gg-close {
    top: 10px;
    right: 10px;
}

/* Next Button */

.gg-next {
    right: 10px;
    bottom: 10px;
}

/* Previous Button */

.gg-prev {
    right: 50px;
    bottom: 10px;
}

/* ==========================================
   Desktop Layout
========================================== */

@media (max-width: 478px) {

    .gg-box img:nth-child(2n):not(:last-of-type) {
        grid-row-end: span 2;
    }

    [data-layout="horizontal"] img:nth-child(2n):not(:last-of-type) {
        grid-column-end: span 2;
        grid-row-end: span 1;
    }

    [data-layout="square"] img:nth-child(2n):not(:last-of-type) {
        grid-column-end: span 1;
        grid-row-end: span 1;
    }
}