/* Start custom CSS for shortcode, class: .elementor-element-d3d9549 *//* =========================================================
   IWERMECTIN SHOP
   BLOG ARCHIVE
   FULL CSS v15
   BLUE / NAVY BRAND SYSTEM
   FILTERS ALIGNED WITH SHOP
   ========================================================= */


/* =========================================================
   GLOBAL RESET
   ========================================================= */

.blog-page,
.blog-page *,
.blog-page *::before,
.blog-page *::after {
    box-sizing: border-box;
}


.blog-page {
    --paper: #F5F4EE;
    --ink: #171B18;

    --navy: #031B42;
    --blue: #005FEF;
    --blue-accent: #4DA3FF;
    --blue-hover: #8CC2FF;

    --product-navy: #E7ECF5;
    --product-blue: #DCEAFF;

    --muted: #5D625E;
    --muted-2: #6B706B;

    --border: #D7D8D0;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        0
        0
        90px !important;

    overflow: visible !important;

    background:
        var(--paper);

    color:
        var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   ELEMENTOR SHORTCODE
   ========================================================= */

.elementor-widget-shortcode:has(.blog-page),
.elementor-widget-shortcode:has(.blog-page)
> .elementor-widget-container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        80px
        0 !important;

    overflow:
        visible !important;
}


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

.blog-hero {
    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(360px, .9fr) !important;

    width:
        100% !important;

    max-width:
        none !important;

    height:
        410px !important;

    min-height:
        410px !important;

    max-height:
        410px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border-top:
        1px solid var(--border) !important;

    border-bottom:
        1px solid var(--border) !important;

    background:
        radial-gradient(
            circle at 18% 40%,
            rgba(255,255,255,.98),
            transparent 44%
        ),
        linear-gradient(
            100deg,
            #F5F4EE 0%,
            #F1F0E8 100%
        ) !important;
}


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

.blog-hero__left {
    position:
        relative !important;

    z-index:
        3 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        104px
        70px
        26px
        120px !important;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.blog-breadcrumbs {
    position:
        absolute !important;

    top:
        100px !important;

    left:
        120px !important;

    z-index:
        30 !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        5px !important;

    width:
        auto !important;

    max-width:
        calc(67% - 150px) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--muted-2) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;

    text-decoration:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


.blog-breadcrumbs a,
.blog-breadcrumbs span {
    display:
        inline-block !important;

    flex:
        0 0 auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--muted-2) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        400 !important;

    line-height:
        1 !important;

    letter-spacing:
        0 !important;

    text-transform:
        uppercase !important;

    text-decoration:
        none !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.blog-breadcrumbs a:link,
.blog-breadcrumbs a:visited,
.blog-breadcrumbs a:active {
    color:
        var(--muted-2) !important;

    font-weight:
        400 !important;

    text-decoration:
        none !important;
}


.blog-breadcrumbs a:hover {
    color:
        var(--blue) !important;
}


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

.blog-hero__kicker {
    position:
        relative !important;

    z-index:
        4 !important;

    top:
        14px !important;

    margin:
        0
        0
        20px !important;

    padding:
        0 !important;

    color:
        var(--blue) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .18em !important;

    text-transform:
        uppercase !important;
}


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

.blog-hero__title {
    position:
        relative !important;

    z-index:
        4 !important;

    top:
        14px !important;

    width:
        100% !important;

    max-width:
        1000px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--ink) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(46px, 4.05vw, 74px) !important;

    font-weight:
        900 !important;

    line-height:
        .90 !important;

    letter-spacing:
        -.052em !important;
}


.blog-hero__title span {
    display:
        block !important;
}


.blog-hero__title-accent {
    margin-top:
        .08em !important;

    color:
        var(--blue) !important;
}


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

.blog-hero__right {
    position:
        relative !important;

    z-index:
        3 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-end !important;

    justify-content:
        center !important;

    gap:
        26px !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        64px
        120px
        48px
        70px !important;

    background:
        var(--product-blue) !important;

    clip-path:
        polygon(
            18% 0,
            100% 0,
            100% 100%,
            0 100%
        ) !important;
}


.blog-hero__right p {
    width:
        100% !important;

    max-width:
        500px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--muted) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        16px !important;

    font-weight:
        400 !important;

    line-height:
        1.72 !important;

    text-align:
        right !important;
}


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

.blog-hero__ghost {
    position:
        absolute !important;

    z-index:
        2 !important;

    right:
        -1vw !important;

    bottom:
        -.16em !important;

    color:
        rgba(3,27,66,.035) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(120px, 15vw, 285px) !important;

    font-weight:
        950 !important;

    line-height:
        .8 !important;

    letter-spacing:
        -.085em !important;

    white-space:
        nowrap !important;

    pointer-events:
        none !important;

    user-select:
        none !important;
}


/* =========================================================
   BLOG CONTENT
   ========================================================= */

.blog-content {
    position:
        relative;

    width:
        100%;

    margin:
        0;

    padding:
        80px
        120px
        0;

    background-color:
        var(--paper);

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.0196'/%3E%3C/svg%3E");

    background-repeat:
        repeat;
}


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

.blog-content__head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    width:
        100%;

    margin-bottom:
        38px;
}


.blog-content__heading {
    min-width:
        0;
}


.blog-content__kicker {
    display:
        block;

    margin:
        0
        0
        18px;

    color:
        var(--navy);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.blog-content__head h2 {
    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(46px, 4vw, 68px);

    font-weight:
        900;

    line-height:
        .92;

    letter-spacing:
        -.045em;
}


.blog-content__intro {
    width:
        34%;

    max-width:
        480px;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.55;

    text-align:
        right;
}


/* =========================================================
   FILTERS
   SHOP-STYLE PILLS
   ========================================================= */

.blog-filters {
    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        wrap !important;

    align-items:
        center !important;

    gap:
        10px !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        24px
        0
        20px !important;

    border-bottom:
        1px solid var(--border) !important;
}


/* =========================================================
   FILTER PILL
   ========================================================= */

.blog-page .blog-filter {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex:
        0 0 auto !important;

    width:
        auto !important;

    height:
        36px !important;

    min-height:
        36px !important;

    margin:
        0 !important;

    padding:
        0 18px !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        100px !important;

    background:
        rgba(255,255,255,.34) !important;

    color:
        var(--navy) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .02em !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;

    text-decoration:
        none !important;

    cursor:
        pointer !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    transform:
        translateY(0) !important;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s cubic-bezier(.22,.61,.36,1),
        box-shadow .25s ease !important;
}


/* =========================================================
   FILTER HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .blog-page .blog-filter:hover {
        background:
            var(--product-blue) !important;

        border-color:
            var(--blue-accent) !important;

        color:
            var(--blue) !important;

        transform:
            translateY(-2px) !important;

        box-shadow:
            0 6px 16px
            rgba(3,27,66,.07) !important;
    }
}


/* =========================================================
   FILTER ACTIVE
   ========================================================= */

.blog-page .blog-filter.is-active {
    background:
        var(--navy) !important;

    border-color:
        var(--navy) !important;

    color:
        #FFFFFF !important;

    box-shadow:
        none !important;
}


/* =========================================================
   FILTER ACTIVE + HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .blog-page .blog-filter.is-active:hover {
        background:
            var(--blue) !important;

        border-color:
            var(--blue) !important;

        color:
            #FFFFFF !important;

        transform:
            translateY(-2px) !important;

        box-shadow:
            0 8px 18px
            rgba(0,95,239,.14) !important;
    }
}


/* =========================================================
   FILTER FOCUS
   ========================================================= */

.blog-page .blog-filter:focus-visible {
    background:
        var(--product-blue) !important;

    border-color:
        var(--blue-accent) !important;

    color:
        var(--blue) !important;

    outline:
        2px solid var(--blue-accent) !important;

    outline-offset:
        2px !important;
}


.blog-page .blog-filter.is-active:focus-visible {
    background:
        var(--navy) !important;

    border-color:
        var(--navy) !important;

    color:
        #FFFFFF !important;
}


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

.blog-posts {
    width:
        100%;

    margin:
        0;

    padding:
        42px
        120px
        110px;

    background-color:
        var(--paper);

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.0196'/%3E%3C/svg%3E");

    background-repeat:
        repeat;
}


/* =========================================================
   BLOG GRID
   ========================================================= */

.blog-grid {
    display:
        grid;

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

    gap:
        58px
        24px;

    width:
        100%;

    margin:
        0;

    padding:
        0;
}


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

.blog-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    margin:
        0;

    padding:
        0;

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.blog-card.is-hidden {
    display:
        none !important;
}


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

.blog-card__image {
    position:
        relative;

    display:
        block;

    width:
        100%;

    aspect-ratio:
        1200 / 630;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    background:
        var(--product-navy);

    color:
        inherit;

    text-decoration:
        none !important;
}


.blog-card__image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    padding:
        0;

    object-fit:
        cover;

    transform:
        scale(1);

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


.blog-card:hover
.blog-card__image img {
    transform:
        scale(1.025);
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.blog-card__image-placeholder {
    display:
        block;

    width:
        100%;

    height:
        100%;

    background:
        linear-gradient(
            135deg,
            var(--product-navy) 0%,
            var(--paper) 100%
        );
}


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

.blog-card__number {
    position:
        absolute;

    top:
        14px;

    left:
        14px;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    min-width:
        34px;

    margin:
        0;

    padding:
        0;

    border:
        1px solid rgba(3,27,66,.18);

    border-radius:
        50%;

    background:
        var(--product-blue);

    color:
        var(--navy);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;
}


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

.blog-card__body {
    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

    width:
        100%;

    padding-top:
        18px;
}


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

.blog-card__meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    width:
        100%;

    margin:
        0
        0
        13px;

    padding:
        0;

    color:
        var(--muted-2);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.blog-card__category {
    color:
        var(--blue);
}


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

.blog-card h3 {
    width:
        100%;

    margin:
        0
        0
        13px !important;

    padding:
        0 !important;

    color:
        var(--ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(22px, 1.8vw, 29px) !important;

    font-weight:
        700 !important;

    line-height:
        1.06 !important;

    letter-spacing:
        -.03em !important;
}


.blog-card h3 a {
    display:
        block;

    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--ink) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    line-height:
        inherit !important;

    letter-spacing:
        inherit !important;

    text-decoration:
        none !important;

    transition:
        color .22s ease;
}


.blog-card h3 a:hover {
    color:
        var(--blue) !important;
}


/* =========================================================
   EXCERPT
   ========================================================= */

.blog-card p {
    width:
        100%;

    margin:
        0
        0
        22px !important;

    padding:
        0 !important;

    color:
        var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.55 !important;
}


/* =========================================================
   READ ARTICLE
   ========================================================= */

.blog-card__link {
    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    margin-top:
        auto;

    padding:
        8px
        0;

    border-bottom:
        1px solid var(--navy);

    color:
        var(--navy) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    text-decoration:
        none !important;

    transition:
        color .25s ease,
        border-color .25s ease;
}


.blog-card__link:hover {
    color:
        var(--blue) !important;

    border-color:
        var(--blue);
}


/* =========================================================
   VECTOR ARROW
   ========================================================= */

.blog-card__arrow {
    display:
        inline-block;

    width:
        13px;

    height:
        13px;

    min-width:
        13px;

    margin-left:
        17px;

    background-color:
        currentColor;

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17L17 7M8 7h9v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");

    -webkit-mask-repeat:
        no-repeat;

    mask-repeat:
        no-repeat;

    -webkit-mask-position:
        center;

    mask-position:
        center;

    -webkit-mask-size:
        contain;

    mask-size:
        contain;

    transform:
        translateY(-1px);

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


.blog-card__link:hover
.blog-card__arrow {
    transform:
        translate(
            3px,
            -4px
        );
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.blog-empty {
    width:
        100%;

    padding:
        40px
        0;

    color:
        var(--muted);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.5;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.blog-pagination {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        8px !important;

    width:
        100% !important;

    margin:
        72px
        0
        0 !important;

    padding:
        0 !important;
}


.blog-pagination
.page-numbers {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-width:
        38px !important;

    height:
        38px !important;

    margin:
        0 !important;

    padding:
        0
        12px !important;

    border:
        1px solid var(--border) !important;

    border-radius:
        100px !important;

    background:
        rgba(255,255,255,.16) !important;

    color:
        var(--navy) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease !important;
}


.blog-pagination
a.page-numbers:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        var(--blue-accent) !important;

    background:
        var(--product-blue) !important;

    color:
        var(--blue) !important;
}


.blog-pagination
.page-numbers.current {
    border-color:
        var(--navy) !important;

    background:
        var(--navy) !important;

    color:
        #FFFFFF !important;
}


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

@media (max-width: 1024px) {

    .elementor-widget-shortcode:has(.blog-page),
    .elementor-widget-shortcode:has(.blog-page)
    > .elementor-widget-container {
        padding:
            56px
            0 !important;
    }


    .blog-hero {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(280px, .75fr) !important;

        height:
            372px !important;

        min-height:
            372px !important;

        max-height:
            372px !important;
    }


    .blog-hero__left {
        justify-content:
            flex-start !important;

        padding:
            88px
            38px
            24px
            40px !important;
    }


    .blog-breadcrumbs {
        top:
            28px !important;

        left:
            40px !important;

        max-width:
            calc(67% - 60px) !important;
    }


    .blog-hero__kicker,
    .blog-hero__title {
        top:
            8px !important;
    }


    .blog-hero__title {
        max-width:
            720px !important;

        font-size:
            clamp(40px, 5vw, 58px) !important;
    }


    .blog-hero__right {
        padding:
            54px
            40px
            38px
            45px !important;
    }


    .blog-hero__right p {
        font-size:
            14px !important;
    }


    .blog-content {
        padding:
            64px
            40px
            0;
    }


    .blog-content__intro {
        width:
            38%;
    }


    .blog-posts {
        padding:
            38px
            40px
            90px;
    }


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

        gap:
            52px
            22px;
    }
}


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

@media (max-width: 767px) {

    .blog-page {
        padding-bottom:
            64px !important;
    }


    .elementor-widget-shortcode:has(.blog-page),
    .elementor-widget-shortcode:has(.blog-page)
    > .elementor-widget-container {
        padding:
            38px
            0 !important;
    }


    .blog-hero {
        display:
            block !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;
    }


    .blog-hero__left {
        position:
            relative !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        justify-content:
            flex-start !important;

        height:
            360px !important;

        min-height:
            360px !important;

        padding:
            102px
            20px
            36px !important;
    }


    .blog-breadcrumbs {
        top:
            28px !important;

        left:
            20px !important;

        width:
            calc(100% - 40px) !important;

        max-width:
            calc(100% - 40px) !important;
    }


    .blog-breadcrumbs,
    .blog-breadcrumbs a,
    .blog-breadcrumbs span {
        font-size:
            9px !important;
    }


    .blog-hero__kicker {
        top:
            6px !important;

        margin-bottom:
            18px !important;

        font-size:
            10px !important;
    }


    .blog-hero__title {
        top:
            6px !important;

        max-width:
            100% !important;

        font-size:
            clamp(38px, 10.5vw, 52px) !important;

        line-height:
            .92 !important;

        letter-spacing:
            -.045em !important;
    }


    .blog-hero__right {
        min-height:
            160px !important;

        height:
            auto !important;

        align-items:
            flex-start !important;

        justify-content:
            center !important;

        gap:
            22px !important;

        padding:
            36px
            20px !important;

        clip-path:
            none !important;
    }


    .blog-hero__right p {
        width:
            100% !important;

        max-width:
            560px !important;

        font-size:
            14px !important;

        line-height:
            1.55 !important;

        text-align:
            left !important;
    }


    .blog-hero__ghost {
        right:
            -20px !important;

        bottom:
            -.08em !important;

        font-size:
            100px !important;
    }


    .blog-content {
        padding:
            52px
            20px
            0;
    }


    .blog-content__head {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            18px;

        margin-bottom:
            28px;
    }


    .blog-content__kicker {
        margin-bottom:
            14px;

        font-size:
            10px;
    }


    .blog-content__head h2 {
        font-size:
            42px;

        line-height:
            .92;
    }


    .blog-content__intro {
        width:
            100%;

        max-width:
            520px;

        font-size:
            14px;

        text-align:
            left;
    }


    /* =====================================================
       MOBILE FILTERS
       HORIZONTAL SCROLL
       ===================================================== */

    .blog-filters {
        flex-wrap:
            nowrap !important;

        width:
            calc(100% + 20px) !important;

        margin-right:
            -20px !important;

        padding:
            18px
            20px
            16px
            0 !important;

        overflow-x:
            auto !important;

        overflow-y:
            hidden !important;

        -webkit-overflow-scrolling:
            touch;

        overscroll-behavior-x:
            contain;

        scrollbar-width:
            none;
    }


    .blog-filters::-webkit-scrollbar {
        display:
            none;
    }


    .blog-page .blog-filter {
        flex:
            0 0 auto !important;

        height:
            34px !important;

        min-height:
            34px !important;

        padding:
            0 14px !important;

        font-size:
            10px !important;
    }


    .blog-posts {
        padding:
            34px
            20px
            72px;
    }


    .blog-grid {
        grid-template-columns:
            1fr;

        gap:
            46px;
    }


    .blog-card h3 {
        font-size:
            25px !important;

        line-height:
            1.05 !important;
    }


    .blog-card p {
        font-size:
            13px;

        line-height:
            1.55 !important;
    }


    .blog-pagination {
        justify-content:
            flex-start !important;

        margin-top:
            54px !important;
    }
}


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

@media (max-width: 390px) {

    .blog-hero__left {
        height:
            350px !important;

        min-height:
            350px !important;

        padding-top:
            98px !important;
    }


    .blog-hero__title {
        font-size:
            38px !important;
    }


    .blog-content__head h2 {
        font-size:
            38px;
    }


    .blog-page .blog-filter {
        padding:
            0 13px !important;

        font-size:
            10px !important;
    }
}/* End custom CSS */