/* =========================================================
   PREMIUM EDITORIAL PRODUCT GALLERY
   Theme: Spicest Light Luxury
========================================================= */

:root{
    --pg-olive: #7A8B5A;
    --pg-olive-dark: #617046;
    --pg-olive-deep: #4D5A39;
    --pg-olive-soft: #A9B68E;

    --pg-cream: #F7F4EA;
    --pg-cream-2: #F1EDDF;
    --pg-paper: #FCFAF4;

    --pg-dark: #20211E;
    --pg-text: #686A62;
    --pg-white: #FFFFFF;
}


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

.pg-gallery{
    --pg-parallax-x: 0px;
    --pg-parallax-y: 0px;

    position: relative;
    isolation: isolate;

    overflow: hidden;

    padding: 115px 0 105px;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(122,139,90,.13),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(181,161,124,.12),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #FAF8F1 0%,
            #F4F0E4 48%,
            #F8F5EC 100%
        );
}


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

    position: absolute;

    top: 0;
    left: 5%;
    right: 5%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(122,139,90,.38),
            transparent
        );
}


.pg-gallery::after{
    content: "COMBO";

    position: absolute;

    right: -25px;
    top: 34%;

    z-index: -1;

    color:
        rgba(122,139,90,.045);

    font-size:
        clamp(100px, 14vw, 230px);

    font-weight: 950;

    letter-spacing: -10px;

    writing-mode: vertical-rl;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.pg-container{
    position: relative;

    z-index: 5;

    max-width: 1720px;

    margin-inline: auto;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.pg-bg-grid{
    position: absolute;

    inset: 0;

    z-index: -3;

    opacity: .28;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(122,139,90,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(122,139,90,.05) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        radial-gradient(
            circle at 50% 45%,
            black,
            transparent 78%
        );
}


/* =========================================================
   ORBS
========================================================= */

.pg-orb{
    position: absolute;

    z-index: -2;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(8px);
}


.pg-orb-one{
    width: 440px;
    height: 440px;

    left: -230px;
    top: 120px;

    background:
        radial-gradient(
            circle,
            rgba(122,139,90,.14),
            transparent 70%
        );

    animation:
        pgOrbOne
        11s ease-in-out infinite;
}


.pg-orb-two{
    width: 390px;
    height: 390px;

    right: -200px;
    bottom: 40px;

    background:
        radial-gradient(
            circle,
            rgba(190,168,127,.13),
            transparent 70%
        );

    animation:
        pgOrbTwo
        13s ease-in-out infinite;
}


/* =========================================================
   DECORATIVE LEAVES
========================================================= */

.pg-leaf{
    position: absolute;

    z-index: -1;

    color:
        rgba(122,139,90,.065);

    pointer-events: none;
}


.pg-leaf-one{
    left: 2%;
    top: 38%;

    font-size: 115px;

    transform:
        rotate(-28deg);

    animation:
        pgLeafOne
        7s ease-in-out infinite;
}


.pg-leaf-two{
    right: 3%;
    bottom: 12%;

    font-size: 100px;

    transform:
        rotate(18deg);

    animation:
        pgLeafTwo
        8s ease-in-out infinite;
}


/* =========================================================
   HEADER
========================================================= */

.pg-header{
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, .75fr);

    gap: 70px;

    align-items: end;

    margin-bottom: 50px;
}


.pg-header-left{
    max-width: 850px;
}


.pg-header-right{
    max-width: 500px;

    padding-bottom: 8px;
}


/* =========================================================
   KICKER
========================================================= */

.pg-kicker{
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color:
        var(--pg-olive-dark);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.pg-kicker-line{
    width: 48px;
    height: 2px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            var(--pg-olive),
            transparent
        );
}


.pg-kicker-icon{
    width: 31px;
    height: 31px;

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

    border-radius: 50%;

    color:
        var(--pg-olive);

    background:
        rgba(255,255,255,.72);

    border:
        1px solid
        rgba(122,139,90,.16);

    box-shadow:
        0 8px 22px
        rgba(70,80,55,.07);
}


/* =========================================================
   TITLE
========================================================= */

.pg-title{
    margin: 0;

    color:
        var(--pg-dark);

    font-size:
        clamp(43px, 5vw, 78px);

    line-height: .98;

    font-weight: 950;

    letter-spacing: -4px;
}


.pg-title span{
    color:
        var(--pg-olive);

    position: relative;
}


.pg-title span::after{
    content: "";

    position: absolute;

    left: 2%;
    right: -3%;
    bottom: 4px;

    z-index: -1;

    height: 9px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            rgba(122,139,90,.22),
            transparent
        );
}


.pg-title em{
    display: block;

    color:
        var(--pg-olive-dark);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 500;

    font-style: italic;

    letter-spacing: -3px;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.pg-header-right p{
    margin:
        0 0 23px;

    color:
        var(--pg-text);

    font-size: 15px;

    line-height: 1.85;
}


.pg-header-meta{
    display: flex;
    align-items: center;

    gap: 12px;
}


.pg-meta-number{
    color:
        var(--pg-olive);

    font-size: 10px;

    font-weight: 950;
}


.pg-meta-line{
    width: 55px;
    height: 1px;

    background:
        rgba(122,139,90,.35);
}


.pg-meta-text{
    color:
        #85877F;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   TOOLBAR
========================================================= */

.pg-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 28px;

    padding:
        13px 15px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.52);

    border:
        1px solid
        rgba(122,139,90,.13);

    box-shadow:
        0 16px 45px
        rgba(61,72,48,.055);

    backdrop-filter:
        blur(14px);
}


/* =========================================================
   FILTERS
========================================================= */

.pg-filters{
    display: flex;
    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.pg-filter,
.pg-filter:hover,
.pg-filter:focus,
.pg-filter.active,
.pg-filter span,
.pg-filter small {
    text-decoration: none !important;
}

.pg-filter{
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 43px;

    padding:
        8px 15px;

    border: 0;

    border-radius: 999px;

    color:
        #676A61;

    background:
        transparent;

    font-size: 13.5px;

    font-weight: 850;

    cursor: pointer;

    text-decoration: none !important;

    transition:
        color .35s ease,
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.pg-filter small{
    min-width: 21px;
    height: 21px;

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

    border-radius: 50%;

    color:
        var(--pg-olive-dark);

    background:
        rgba(122,139,90,.10);

    font-size: 11px;
}


.pg-filter:hover{
    color:
        var(--pg-olive-dark);

    transform:
        translateY(-2px);
}


.pg-filter.active{
    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--pg-olive),
            var(--pg-olive-dark)
        );

    box-shadow:
        0 12px 28px
        rgba(122,139,90,.24);
}


.pg-filter.active small{
    color:
        var(--pg-olive-dark);

    background:
        #fff;
}

.pg-item.pg-hidden{
    display: none !important;
    opacity: 0 !important;
}


/* =========================================================
   TOOLBAR NOTE
========================================================= */

.pg-toolbar-note{
    display: flex;
    align-items: center;

    gap: 8px;

    padding-right: 8px;

    color:
        #93958D;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.pg-toolbar-note i{
    color:
        var(--pg-olive);

    animation:
        pgScrollArrow
        1.8s ease-in-out infinite;
}


/* =========================================================
   EDITORIAL GRID
========================================================= */

.pg-grid{
    display: grid;

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

    grid-auto-rows:
        85px;

    gap: 18px;
}


/* Featured */

.pg-item-featured{
    grid-column:
        span 6;

    grid-row:
        span 6;
}


/* Tall */

.pg-item-tall{
    grid-column:
        span 3;

    grid-row:
        span 6;
}


/* Small */

.pg-item-small{
    grid-column:
        span 3;

    grid-row:
        span 3;
}


/* Story */

.pg-story-card{
    grid-column:
        span 3;

    grid-row:
        span 3;
}


/* Wide */

.pg-item-wide{
    grid-column:
        span 5;

    grid-row:
        span 4;
}


/* Medium */

.pg-item-medium{
    grid-column:
        span 4;

    grid-row:
        span 4;
}


/* Last */

.pg-item-last{
    grid-column:
        span 3;

    grid-row:
        span 4;
}


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

.pg-item{
    min-width: 0;

    transition:
        opacity .45s ease,
        transform .45s ease,
        filter .45s ease;
}


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


.pg-item.pg-filter-visible{
    animation:
        pgFilterIn
        .55s
        cubic-bezier(.22,1,.36,1)
        both;
}


/* =========================================================
   CARD
========================================================= */

.pg-card{
    --pg-mouse-x: 50%;
    --pg-mouse-y: 50%;

    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 25px;

    color:
        #fff;

    text-decoration: none;

    background:
        #D9DDCF;

    border:
        1px solid
        rgba(255,255,255,.70);

    box-shadow:
        0 18px 50px
        rgba(47,57,38,.10);

    transform:
        translateZ(0);

    transition:
        transform .65s
        cubic-bezier(.22,1,.36,1),

        box-shadow .65s
        cubic-bezier(.22,1,.36,1);
}


.pg-card::before{
    content: "";

    position: absolute;

    inset: 0;

    z-index: 5;

    opacity: 0;

    pointer-events: none;

    background:
        radial-gradient(
            240px circle
            at
            var(--pg-mouse-x)
            var(--pg-mouse-y),

            rgba(255,255,255,.22),

            transparent 60%
        );

    transition:
        opacity .35s ease;
}


.pg-card:hover::before{
    opacity: 1;
}


.pg-card:hover{
    color:
        #fff;

    transform:
        translateY(-8px);

    box-shadow:
        0 32px 75px
        rgba(47,57,38,.19);
}


/* =========================================================
   IMAGE WRAP
========================================================= */

.pg-image-wrap{
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.pg-image{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        scale(1.03);

    transition:
        transform 1.1s
        cubic-bezier(.22,1,.36,1),

        filter .8s ease;
}


.pg-card:hover
.pg-image{
    transform:
        scale(1.11);

    filter:
        saturate(1.06)
        contrast(1.03);
}


/* =========================================================
   IMAGE SHADE
========================================================= */

.pg-image-shade{
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(18,22,15,.02) 25%,
            rgba(18,22,15,.16) 55%,
            rgba(18,22,15,.76) 100%
        );

    transition:
        background .5s ease;
}


.pg-card:hover
.pg-image-shade{
    background:
        linear-gradient(
            180deg,
            rgba(18,22,15,.02) 20%,
            rgba(18,22,15,.12) 48%,
            rgba(18,22,15,.84) 100%
        );
}


/* =========================================================
   CARD INDEX
========================================================= */

.pg-card-index{
    position: absolute;

    left: 18px;
    top: 18px;

    z-index: 3;

    width: 28px;
    height: 28px;

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

    border-radius: 50%;

    color:
        #fff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    background:
        rgba(24,29,20,.34);

    border:
        1px solid
        rgba(255,255,255,.23);

    backdrop-filter:
        blur(12px);
}


/* =========================================================
   FEATURED BADGE
========================================================= */

.pg-card-badge{
    position: absolute;

    right: 18px;
    top: 18px;

    z-index: 3;

    padding:
        8px 13px;

    border-radius: 999px;

    color:
        var(--pg-olive-dark);

    background:
        rgba(255,255,255,.88);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.10);

    backdrop-filter:
        blur(10px);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.pg-card-content{
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    padding:
        24px;
}


.pg-card-copy{
    transform:
        translateY(7px);

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1);
}


.pg-card:hover
.pg-card-copy{
    transform:
        translateY(0);
}


.pg-card-copy small{
    display: block;

    margin-bottom: 6px;

    color:
        rgba(255,255,255,.70);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.pg-card-copy h3{
    margin: 0;

    color:
        #fff;

    font-size:
        clamp(17px, 1.6vw, 27px);

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -.8px;
}


.pg-card-copy p{
    max-width: 360px;

    margin:
        8px 0 0;

    color:
        rgba(255,255,255,.75);

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   VIEW BUTTON
========================================================= */

.pg-view-btn{
    flex:
        0 0 auto;

    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    color:
        var(--pg-olive-dark);

    background:
        rgba(255,255,255,.91);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.13);

    transform:
        rotate(-35deg);

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1),

        background .35s ease,

        color .35s ease;
}


.pg-card:hover
.pg-view-btn{
    color:
        #fff;

    background:
        var(--pg-olive);

    transform:
        rotate(0deg);
}


/* =========================================================
   STORY CARD
========================================================= */

.pg-story-card{
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        26px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(244,240,228,.72)
        );

    border:
        1px solid
        rgba(122,139,90,.15);

    box-shadow:
        0 18px 50px
        rgba(47,57,38,.08);

    backdrop-filter:
        blur(12px);

    transition:
        transform .55s
        cubic-bezier(.22,1,.36,1),

        box-shadow .55s ease;
}


.pg-story-card::before{
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(122,139,90,.24);

    animation:
        pgStoryCircle
        18s linear infinite;
}


.pg-story-card:hover{
    transform:
        translateY(-7px);

    box-shadow:
        0 28px 65px
        rgba(47,57,38,.13);
}


.pg-story-number{
    position: absolute;

    right: 15px;
    bottom: -12px;

    color:
        rgba(122,139,90,.06);

    font-size: 75px;

    font-weight: 950;

    letter-spacing: -6px;

    pointer-events: none;
}


.pg-story-icon{
    width: 43px;
    height: 43px;

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

    margin-bottom: 13px;

    border-radius: 14px;

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            var(--pg-olive),
            var(--pg-olive-dark)
        );

    box-shadow:
        0 13px 28px
        rgba(122,139,90,.24);

    animation:
        pgStoryIcon
        4s ease-in-out infinite;
}


.pg-story-card h3{
    position: relative;

    z-index: 2;

    margin:
        0 0 8px;

    color:
        var(--pg-dark);

    font-size:
        clamp(20px, 1.8vw, 28px);

    line-height: 1;

    font-weight: 950;

    letter-spacing: -1.2px;
}


.pg-story-card h3 em{
    display: block;

    color:
        var(--pg-olive);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 500;
}


.pg-story-card p{
    position: relative;

    z-index: 2;

    margin: 0;

    color:
        var(--pg-text);

    font-size: 10.5px;

    line-height: 1.55;
}


.pg-story-bottom{
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 13px;

    color:
        var(--pg-olive-dark);

    font-size: 11.5px;

    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.pg-story-bottom i{
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--pg-olive);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.pg-bottom{
    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 25px;

    margin-top: 45px;
}


.pg-bottom-line{
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(122,139,90,.10),
            rgba(122,139,90,.42)
        );
}


.pg-bottom-copy{
    display: flex;
    flex-direction: column;

    min-width: 230px;
}


.pg-bottom-copy small{
    color:
        #95978F;

    font-size: 12px;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.pg-bottom-copy strong{
    margin-top: 3px;

    color:
        var(--pg-dark);

    font-size: 12px;

    font-weight: 900;
}


/* =========================================================
   MAIN BUTTON
========================================================= */

.pg-main-btn{
    position: relative;

    min-height: 58px;

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

    gap: 16px;

    overflow: hidden;

    padding:
        8px 9px 8px 24px;

    border-radius: 999px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            var(--pg-olive),
            var(--pg-olive-dark)
        );

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    box-shadow:
        0 17px 40px
        rgba(122,139,90,.25);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


.pg-main-btn::before{
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.27),
            transparent
        );

    transition:
        left .75s ease;
}


.pg-main-btn:hover::before{
    left: 150%;
}


.pg-main-btn:hover{
    color:
        #fff;

    transform:
        translateY(-5px);

    box-shadow:
        0 26px 55px
        rgba(122,139,90,.34);
}


.pg-main-btn-icon{
    position: relative;

    width: 41px;
    height: 41px;

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

    border-radius: 50%;

    color:
        var(--pg-olive-dark);

    background:
        #fff;

    transition:
        transform .4s ease;
}


.pg-main-btn:hover
.pg-main-btn-icon{
    transform:
        rotate(-35deg);
}


/* =========================================================
   REVEAL
========================================================= */

.pg-reveal{
    opacity: 0;

    transform:
        translateY(42px);

    transition:
        opacity .9s
        cubic-bezier(.22,1,.36,1),

        transform .9s
        cubic-bezier(.22,1,.36,1);

    transition-delay:
        var(--pg-delay, 0ms);
}


.pg-reveal.pg-show{
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes pgOrbOne{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(35px,25px);
    }

}


@keyframes pgOrbTwo{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(-30px,-22px);
    }

}


@keyframes pgLeafOne{

    0%,
    100%{
        transform:
            rotate(-28deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(-20deg)
            translateY(-13px);
    }

}


@keyframes pgLeafTwo{

    0%,
    100%{
        transform:
            rotate(18deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(25deg)
            translateY(12px);
    }

}


@keyframes pgScrollArrow{

    0%,
    100%{
        transform:
            translateY(-2px);
    }

    50%{
        transform:
            translateY(5px);
    }

}


@keyframes pgStoryCircle{

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes pgStoryIcon{

    0%,
    100%{
        transform:
            translateY(0)
            rotate(0);
    }

    50%{
        transform:
            translateY(-6px)
            rotate(-5deg);
    }

}


@keyframes pgFilterIn{

    from{
        opacity: 0;

        transform:
            translateY(20px)
            scale(.97);
    }

    to{
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1399.98px){

    .pg-gallery{
        padding:
            95px 0;
    }


    .pg-grid{
        grid-auto-rows:
            76px;
    }


    .pg-header{
        gap: 45px;
    }


    .pg-title{
        font-size:
            clamp(42px, 4.8vw, 68px);
    }

}


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

@media (max-width: 991.98px){

    .pg-gallery{
        padding:
            82px 0;
    }


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

        gap: 25px;

        margin-bottom: 38px;
    }


    .pg-header-right{
        max-width: 700px;
    }


    .pg-toolbar{
        align-items: flex-start;

        flex-direction: column;
    }


    .pg-toolbar-note{
        display: none;
    }


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

        grid-auto-rows:
            78px;
    }


    .pg-item-featured{
        grid-column:
            span 6;

        grid-row:
            span 5;
    }


    .pg-item-tall{
        grid-column:
            span 3;

        grid-row:
            span 5;
    }


    .pg-item-small{
        grid-column:
            span 3;

        grid-row:
            span 3;
    }


    .pg-story-card{
        grid-column:
            span 3;

        grid-row:
            span 3;
    }


    .pg-item-wide{
        grid-column:
            span 6;

        grid-row:
            span 4;
    }


    .pg-item-medium{
        grid-column:
            span 3;

        grid-row:
            span 4;
    }


    .pg-item-last{
        grid-column:
            span 3;

        grid-row:
            span 4;
    }


    .pg-bottom{
        grid-template-columns:
            1fr auto;
    }


    .pg-bottom-line{
        display: none;
    }

}


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

@media (max-width: 767.98px){

    .pg-gallery{
        padding:
            68px 0;
    }


    .pg-title{
        font-size:
            clamp(40px, 11vw, 57px);

        letter-spacing:
            -2.8px;
    }


    .pg-title em{
        letter-spacing:
            -2px;
    }


    .pg-filters{
        width: 100%;
    }


    .pg-filter{
        flex:
            1 1 auto;

        justify-content: center;
    }


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

        grid-auto-rows:
            115px;

        gap: 13px;
    }


    .pg-item-featured{
        grid-column:
            span 2;

        grid-row:
            span 4;
    }


    .pg-item-tall{
        grid-column:
            span 1;

        grid-row:
            span 3;
    }


    .pg-item-small{
        grid-column:
            span 1;

        grid-row:
            span 3;
    }


    .pg-story-card{
        grid-column:
            span 2;

        grid-row:
            span 2;
    }


    .pg-item-wide{
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .pg-item-medium{
        grid-column:
            span 1;

        grid-row:
            span 3;
    }


    .pg-item-last{
        grid-column:
            span 1;

        grid-row:
            span 3;
    }


    .pg-card{
        border-radius:
            20px;
    }


    .pg-story-card{
        border-radius:
            20px;
    }


    .pg-card-content{
        padding:
            17px;
    }


    .pg-card-copy h3{
        font-size:
            18px;
    }


    .pg-card-copy p{
        display: none;
    }


    .pg-view-btn{
        width: 40px;
        height: 40px;
    }


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

        justify-items:
            start;
    }

}


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

@media (max-width: 480px){

    .pg-gallery{
        padding:
            58px 0;
    }


    .pg-kicker{
        font-size:
            9px;
    }


    .pg-kicker-line{
        width: 30px;
    }


    .pg-title{
        font-size:
            clamp(36px, 11vw, 47px);

        letter-spacing:
            -2.2px;
    }


    .pg-toolbar{
        padding:
            10px;
    }


    .pg-filter{
        min-height:
            39px;

        padding:
            7px 10px;

        font-size:
            9px;
    }


    .pg-grid{
        grid-auto-rows:
            100px;

        gap:
            10px;
    }


    .pg-item-featured{
        grid-row:
            span 4;
    }


    .pg-item-tall,
    .pg-item-small{
        grid-row:
            span 3;
    }


    .pg-story-card{
        grid-row:
            span 3;

        padding:
            22px;
    }


    .pg-item-wide{
        grid-row:
            span 3;
    }


    .pg-item-medium,
    .pg-item-last{
        grid-column:
            span 2;

        grid-row:
            span 3;
    }


    .pg-card-index{
        left: 12px;
        top: 12px;

        width: 32px;
        height: 32px;
    }


    .pg-card-badge{
        right: 12px;
        top: 12px;
    }


    .pg-card-content{
        padding:
            14px;
    }


    .pg-card-copy small{
        font-size:
            7px;
    }


    .pg-card-copy h3{
        font-size:
            16px;
    }


    .pg-view-btn{
        width: 36px;
        height: 36px;

        font-size:
            11px;
    }


    .pg-main-btn{
        width: 100%;

        max-width: 330px;

        justify-content:
            space-between;
    }

}


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

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

    .pg-orb,
    .pg-leaf,
    .pg-story-card::before,
    .pg-story-icon,
    .pg-toolbar-note i{
        animation:
            none !important;
    }


    .pg-reveal{
        opacity: 1;

        transform: none;

        transition: none;
    }


    .pg-image{
        transition:
            none;
    }

}