/* =========================================================
   NARINA SAFARIS
   GALLERY — CINEMATIC DARK / PREMIUM EDITORIAL MASONRY
   Replace your current gallery.css with this file.
========================================================= */

:root {
    --gallery-bg: #06110d;
    --gallery-bg-deep: #030b08;

    --gallery-forest: #073323;
    --gallery-forest-soft: #0b4934;

    --gallery-charcoal: #151916;
    --gallery-charcoal-soft: #1b211e;

    --gallery-cream: #f5f1e7;
    --gallery-sage: #c8d6cd;
    --gallery-muted: #95a69c;

    --gallery-line: rgba(255, 255, 255, 0.08);
    --gallery-line-strong: rgba(255, 255, 255, 0.14);

    --gallery-glass: rgba(15, 28, 22, 0.70);
    --gallery-glass-strong: rgba(18, 34, 27, 0.86);
}


/* =========================================================
   PAGE
========================================================= */

.gallery-page {
    position: relative;
    overflow: hidden;

    color: var(--gallery-cream);

    background:
        radial-gradient(
            circle at 14% 16%,
            rgba(96, 111, 76, 0.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 86% 60%,
            rgba(17, 87, 61, 0.12),
            transparent 30%
        ),
        linear-gradient(
            to bottom,
            #111613 0%,
            #0b130f 24%,
            #06110d 60%,
            #030b08 100%
        );
}


/* =========================================================
   HERO
========================================================= */

.gallery-hero {
    position: relative;

    min-height: 470px;

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

    overflow: hidden;

    background: #0b4a34;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);
}


.gallery-hero-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(0.96)
        brightness(0.88)
        contrast(1.04);

    transform: scale(1.01);
}


.gallery-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(2, 18, 11, 0.90) 0%,
            rgba(2, 18, 11, 0.42) 42%,
            rgba(2, 18, 11, 0.17) 72%,
            rgba(2, 18, 11, 0.36) 100%
        ),
        linear-gradient(
            to right,
            rgba(3, 29, 19, 0.30),
            rgba(3, 29, 19, 0.03) 52%,
            rgba(3, 22, 15, 0.26)
        ),
        radial-gradient(
            circle at 50% 42%,
            transparent 18%,
            rgba(0, 0, 0, 0.28) 100%
        );
}


.gallery-hero::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 120px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(8, 18, 14, 0.52)
        );
}


.gallery-hero-content {
    position: relative;
    z-index: 2;

    width:
        calc(
            100% -
            (var(--site-gutter) * 2)
        );

    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}


.gallery-hero-eyebrow {
    margin-bottom: 18px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

    color:
        rgba(
            245,
            241,
            231,
            0.78
        );

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.19em;

    text-transform: uppercase;
}


.gallery-hero-eyebrow span {
    width: 34px;
    height: 2px;

    background: var(--narina-red);
}


.gallery-hero h1 {
    margin: 0;

    color: var(--gallery-cream);

    font-family: var(--font-heading);

    font-size:
        clamp(
            60px,
            7vw,
            100px
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.045em;

    text-shadow:
        0 12px 42px
        rgba(0, 0, 0, 0.28);
}


.gallery-hero p {
    max-width: 590px;

    margin:
        22px
        auto
        0;

    color:
        rgba(
            245,
            241,
            231,
            0.78
        );

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   OPTIONAL SIMPLE GALLERY HEADING
   Supports your alternate heading version too.
========================================================= */

.gallery-heading {
    position: relative;

    padding:
        clamp(85px, 8vw, 125px)
        var(--site-gutter)
        62px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(43, 101, 73, 0.15),
            transparent 42%
        ),
        linear-gradient(
            to bottom,
            #151916,
            #111613
        );

    border-bottom:
        1px solid
        var(--gallery-line);
}


.gallery-heading::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(760px, 72%);
    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.10),
            transparent
        );
}


.gallery-heading-container {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}


.gallery-heading .section-eyebrow {
    justify-content: center;

    color:
        rgba(
            215,
            226,
            219,
            0.70
        );
}


.gallery-heading h1 {
    margin: 12px 0 0;

    color: var(--gallery-cream);

    font-family: var(--font-heading);

    font-size:
        clamp(
            58px,
            6vw,
            92px
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -0.045em;
}


.gallery-heading p {
    max-width: 520px;

    margin:
        20px
        auto
        0;

    color:
        rgba(
            204,
            217,
            209,
            0.66
        );

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   INTRO — WARM CHARCOAL / EDITORIAL
========================================================= */

.gallery-intro {
    position: relative;

    padding:
        clamp(80px, 8vw, 120px)
        var(--site-gutter)
        70px;

    background:
        radial-gradient(
            circle at 22% 0%,
            rgba(139, 112, 64, 0.075),
            transparent 34%
        ),
        radial-gradient(
            circle at 78% 48%,
            rgba(63, 93, 69, 0.11),
            transparent 30%
        ),
        linear-gradient(
            to bottom,
            #151916,
            #111613
        );

    border-bottom:
        1px solid
        var(--gallery-line);
}


.gallery-intro-container {
    width: 100%;
    max-width: var(--site-max-width);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr
        minmax(280px, 0.62fr);

    align-items: end;

    gap: 80px;
}


.gallery-intro h2 {
    margin: 0;

    color: var(--gallery-cream);

    font-family: var(--font-heading);

    font-size:
        clamp(
            44px,
            4.5vw,
            68px
        );

    line-height: 1.03;

    letter-spacing: -0.03em;
}


.gallery-intro h2 em {
    display: block;

    color: #acc9b8;

    font-style: normal;
    font-weight: 500;
}


.gallery-intro-container > p {
    max-width: 430px;

    margin: 0;

    color:
        rgba(
            204,
            217,
            209,
            0.66
        );

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   GALLERY SECTION
========================================================= */

.gallery-section {
    position: relative;

    padding:
        0
        var(--site-gutter)
        clamp(95px, 9vw, 145px);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(31, 91, 63, 0.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 48%,
            rgba(46, 71, 55, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 76%,
            rgba(16, 84, 59, 0.10),
            transparent 24%
        ),
        linear-gradient(
            to bottom,
            #08130f 0%,
            #05100c 52%,
            #030c09 100%
        );
}


.gallery-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.55;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.014),
            transparent 28%,
            transparent 74%,
            rgba(255, 255, 255, 0.010)
        );
}


.gallery-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: var(--site-max-width);

    margin: 0 auto;
}


/* =========================================================
   FILTERS — PREMIUM GLASS CHIPS
========================================================= */

.gallery-filter {
    padding:
        34px
        0
        24px;

    margin-bottom: 34px;

    display: flex;
    align-items: center;

    gap: 10px;

    overflow-x: auto;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.085
        );

    scrollbar-width: none;
}


.gallery-filter::-webkit-scrollbar {
    display: none;
}


.gallery-filter-btn {
    position: relative;

    min-height: 39px;

    padding:
        0
        16px;

    flex-shrink: 0;

    color:
        rgba(
            219,
            229,
            223,
            0.62
        );

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.055
        );

    border-radius: 999px;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-family: var(--font-body);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


.gallery-filter-btn::after {
    display: none;
}


.gallery-filter-btn:hover {
    color: #ffffff;

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

    border-color:
        rgba(
            255,
            255,
            255,
            0.12
        );

    transform:
        translateY(-1px);
}


.gallery-filter-btn.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(20, 101, 70, 0.97),
            rgba(8, 66, 46, 0.97)
        );

    border-color:
        rgba(
            139,
            193,
            160,
            0.23
        );

    box-shadow:
        inset
            0 1px 0
            rgba(255, 255, 255, 0.10),
        0 8px 24px
            rgba(0, 0, 0, 0.20);
}


/* =========================================================
   PREMIUM MASONRY
========================================================= */

.masonry-gallery {
    columns: 3;

    column-gap: 18px;
}


/* =========================================================
   GALLERY ITEM — FRAMED EDITORIAL GLASS
========================================================= */

.gallery-item {
    position: relative;

    width: 100%;

    margin:
        0
        0
        18px;

    padding: 7px;

    display: block;

    break-inside: avoid;

    overflow: hidden;

    isolation: isolate;

    cursor: zoom-in;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025) 48%,
            rgba(255, 255, 255, 0.015)
        ),
        rgba(13, 25, 19, 0.72);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.095
        );

    border-radius: 18px;

    box-shadow:
        inset
            0 1px 0
            rgba(255, 255, 255, 0.04),
        0 16px 36px
            rgba(0, 0, 0, 0.25);

    backdrop-filter:
        blur(16px)
        saturate(1.08);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(1.08);

    transition:
        transform 0.38s
            cubic-bezier(.2, .7, .2, 1),
        box-shadow 0.38s ease,
        border-color 0.38s ease;
}


.gallery-item::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 5;

    pointer-events: none;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(255, 255, 255, 0.05),
            transparent 28%
        );
}


.gallery-item img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;

    display: block;

    border-radius: 12px;

    transform: scale(1);

    filter:
        saturate(0.95)
        brightness(0.94)
        contrast(1.025);

    transition:
        transform
            0.8s
            cubic-bezier(
                0.2,
                0.7,
                0.2,
                1
            ),
        filter
            0.45s ease;
}


/* CINEMATIC HOVER LAYER */

.gallery-item::after {
    content: "";

    position: absolute;

    inset: 7px;

    z-index: 2;

    border-radius: 12px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            to top,
            rgba(2, 21, 13, 0.88) 0%,
            rgba(2, 21, 13, 0.32) 44%,
            rgba(2, 21, 13, 0.04) 78%
        );

    transition:
        opacity 0.38s ease;
}


/* =========================================================
   CAPTION
========================================================= */

.gallery-caption {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 25px;

    z-index: 4;

    color: #ffffff;

    font-family: var(--font-heading);

    font-size:
        clamp(
            16px,
            1.3vw,
            21px
        );

    font-weight: 500;

    line-height: 1.2;

    text-align: left;

    opacity: 0;

    transform:
        translateY(14px);

    pointer-events: none;

    transition:
        opacity 0.38s ease,
        transform 0.38s ease;
}


.gallery-caption::before {
    content: "";

    width: 28px;
    height: 2px;

    margin-bottom: 10px;

    display: block;

    background:
        var(--narina-red);
}


/* SUPPORT OLD .gallery-hover MARKUP */

.gallery-hover {
    position: absolute;

    inset: 7px;

    z-index: 3;

    display: flex;

    align-items: flex-end;
    justify-content: flex-start;

    padding: 22px;

    border-radius: 12px;

    background:
        linear-gradient(
            to top,
            rgba(2, 21, 13, 0.84),
            rgba(2, 21, 13, 0.18) 55%,
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.38s ease;
}


.gallery-hover span {
    padding:
        9px
        13px;

    color: #ffffff;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.28
        );

    border-radius: 999px;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transform:
        translateY(8px);

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


/* =========================================================
   ITEM HOVER
========================================================= */

.gallery-item:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(
            255,
            255,
            255,
            0.17
        );

    box-shadow:
        inset
            0 1px 0
            rgba(255, 255, 255, 0.065),
        0 28px 58px
            rgba(0, 0, 0, 0.38);
}


.gallery-item:hover img {
    transform:
        scale(1.055);

    filter:
        saturate(1.03)
        brightness(1)
        contrast(1.035);
}


.gallery-item:hover::after {
    opacity: 1;
}


.gallery-item:hover
.gallery-caption {
    opacity: 1;

    transform:
        translateY(0);
}


.gallery-item:hover
.gallery-hover {
    opacity: 1;
}


.gallery-item:hover
.gallery-hover span {
    transform:
        translateY(0);
}


/* SUBTLE EDITORIAL VARIATION */

.masonry-gallery
.gallery-item:nth-child(5n + 2) {
    transform:
        translateY(8px);
}


.masonry-gallery
.gallery-item:nth-child(5n + 2):hover {
    transform:
        translateY(1px);
}


.masonry-gallery
.gallery-item:nth-child(7n + 4) {
    border-radius: 22px;
}


.masonry-gallery
.gallery-item:nth-child(7n + 4)
img,
.masonry-gallery
.gallery-item:nth-child(7n + 4)::after,
.masonry-gallery
.gallery-item:nth-child(7n + 4)
.gallery-hover {
    border-radius: 15px;
}


/* FILTERING */

.gallery-item.gallery-hidden {
    display: none;
}


/* =========================================================
   LIGHTBOX — PREMIUM GLASS
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 99999;

    padding: 45px;

    display: flex;

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

    background:
        radial-gradient(
            circle at center,
            rgba(10, 42, 29, 0.38),
            transparent 55%
        ),
        rgba(
            2,
            12,
            8,
            0.965
        );

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}


.gallery-lightbox.open {
    opacity: 1;

    visibility: visible;
}


body.lightbox-open {
    overflow: hidden;
}


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

.lightbox-content {
    position: relative;

    width:
        min(
            1200px,
            84vw
        );

    height:
        min(
            86vh,
            900px
        );

    padding:
        10px;

    display: flex;
    flex-direction: column;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.018)
        ),
        rgba(10, 22, 16, 0.52);

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-radius: 22px;

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, 0.50);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.lightbox-content img {
    max-width: 100%;

    max-height:
        calc(
            100% -
            52px
        );

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 14px;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.40);
}


/* LIGHTBOX INFO */

.lightbox-info {
    width: 100%;

    margin-top: 18px;

    padding:
        0
        8px;

    display: flex;

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

    gap: 30px;
}


.lightbox-info p {
    margin: 0;

    color: var(--gallery-cream);

    font-family: var(--font-heading);

    font-size: 17px;
    font-weight: 500;

    line-height: 1.4;
}


.lightbox-info span {
    flex-shrink: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.15em;
}


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

.lightbox-close {
    position: absolute;

    top: 24px;
    right: 28px;

    width: 48px;
    height: 48px;

    display: flex;

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

    color: #ffffff;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius: 50%;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-size: 26px;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.lightbox-close:hover {
    background:
        var(--narina-red);

    border-color:
        var(--narina-red);

    transform:
        rotate(5deg);
}


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

.lightbox-arrow {
    position: absolute;

    top: 50%;

    width: 52px;
    height: 52px;

    display: flex;

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

    color: #ffffff;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-radius: 50%;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    font-size: 18px;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.lightbox-prev {
    left: 28px;
}


.lightbox-next {
    right: 28px;
}


.lightbox-arrow:hover {
    background:
        var(--narina-red);

    border-color:
        var(--narina-red);
}


.lightbox-prev:hover {
    transform:
        translateY(-50%)
        translateX(-3px);
}


.lightbox-next:hover {
    transform:
        translateY(-50%)
        translateX(3px);
}


/* =========================================================
   FINAL CTA AREA — DARK CHARCOAL TRANSITION
========================================================= */

.gallery-page
.final-cta-wrap {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(120, 94, 52, 0.07),
            transparent 36%
        ),
        linear-gradient(
            to bottom,
            #111613,
            #0d120f
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.055
        );
}


/* If your global CTA card has this common shape,
   these declarations make it blend with the gallery page
   without breaking the global component. */

.gallery-page
.final-cta {
    position: relative;
}


.gallery-page
.final-cta-box {
    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    box-shadow:
        0 22px 55px
        rgba(0, 0, 0, 0.28);
}


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

@media (max-width: 950px) {

    .gallery-intro-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .masonry-gallery {
        columns: 2;

        column-gap: 16px;
    }


    .masonry-gallery
    .gallery-item:nth-child(5n + 2) {
        transform: none;
    }


    .masonry-gallery
    .gallery-item:nth-child(5n + 2):hover {
        transform:
            translateY(-7px);
    }


    .lightbox-content {
        width: 80vw;
    }

}


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

@media (max-width: 650px) {

    .gallery-hero {
        min-height: 420px;
    }


    .gallery-hero h1 {
        font-size: 56px;
    }


    .gallery-heading {
        padding:
            70px
            var(--site-gutter)
            42px;
    }


    .gallery-heading h1 {
        font-size: 55px;
    }


    .gallery-heading p {
        font-size: 13px;
    }


    .gallery-intro {
        padding:
            70px
            var(--site-gutter)
            48px;
    }


    .gallery-intro h2 {
        font-size: 42px;
    }


    .gallery-section {
        padding:
            0
            var(--site-gutter)
            78px;
    }


    .gallery-filter {
        gap: 8px;

        margin-bottom: 24px;

        padding-top: 26px;
    }


    .gallery-filter-btn {
        min-height: 36px;

        padding:
            0
            14px;

        font-size: 8px;
    }


    .masonry-gallery {
        columns: 1;
    }


    .gallery-item {
        margin-bottom: 14px;

        padding: 6px;

        border-radius: 16px;
    }


    .gallery-item img,
    .gallery-item::after,
    .gallery-hover {
        border-radius: 11px;
    }


    .gallery-caption {
        left: 24px;
        right: 24px;
        bottom: 22px;

        opacity: 1;

        transform: none;

        font-size: 18px;
    }


    .gallery-item::after {
        opacity: 0.58;
    }


    .gallery-hover {
        display: none;
    }


    .gallery-lightbox {
        padding:
            65px
            12px
            70px;
    }


    .lightbox-content {
        width: 100%;

        height: 76vh;

        padding: 7px;

        border-radius: 17px;
    }


    .lightbox-content img {
        border-radius: 11px;
    }


    .lightbox-close {
        top: 15px;
        right: 15px;

        width: 43px;
        height: 43px;
    }


    .lightbox-arrow {
        top: auto;
        bottom: 18px;

        width: 43px;
        height: 43px;

        transform: none;
    }


    .lightbox-prev {
        left: 15px;
    }


    .lightbox-next {
        right: 15px;
    }


    .lightbox-prev:hover {
        transform:
            translateX(-2px);
    }


    .lightbox-next:hover {
        transform:
            translateX(2px);
    }


    .lightbox-info {
        padding:
            0
            52px;

        flex-direction: column;

        gap: 5px;

        text-align: center;
    }

}


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

@media (max-width: 420px) {

    .gallery-hero h1 {
        font-size: 50px;
    }


    .gallery-heading h1 {
        font-size: 49px;
    }


    .gallery-caption {
        font-size: 17px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .gallery-item,
    .gallery-item img,
    .gallery-caption,
    .gallery-hover,
    .gallery-hover span,
    .gallery-filter-btn,
    .gallery-lightbox,
    .lightbox-close,
    .lightbox-arrow {
        transition: none;
    }

}