/* Minification failed. Returning unminified contents.
(11,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(12,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,35): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(37,23): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(38,26): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(45,28): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(46,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(47,29): run-time error CSS1039: Token not allowed after unary operator: '-blog-title-to-grid-gap'
(52,33): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(58,29): run-time error CSS1039: Token not allowed after unary operator: '-blog-title-size'
(59,31): run-time error CSS1039: Token not allowed after unary operator: '-blog-title-line-height'
(64,28): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(65,29): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(68,19): run-time error CSS1039: Token not allowed after unary operator: '-blog-grid-gap'
(75,22): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-height'
(78,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(79,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(88,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(88,48): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(97,32): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-image-ratio'
(99,33): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(99,52): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(107,23): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-content-padding-y'
(107,58): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-content-padding-x'
(108,23): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-content-gap'
(114,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(116,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(117,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(129,26): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-title-reserved-height'
(130,25): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-title-size'
(131,27): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-title-line-height'
(146,25): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(149,29): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-title-size'
(150,31): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-title-line-height'
(155,26): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-text-reserved-height'
(160,25): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-text-size'
(161,27): run-time error CSS1039: Token not allowed after unary operator: '-blog-card-text-line-height'
(166,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(169,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(170,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(175,31): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(182,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(183,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(184,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(185,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(186,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(191,22): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(195,22): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-text-height'
(196,19): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-header-offset'
(196,58): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(196,80): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-padding-bottom'
(207,19): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-content-row-gap'
(223,21): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-subtitle-size'
(224,23): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-subtitle-line-height'
(225,17): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-subtitle-color'
(230,18): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-cover-height'
(256,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(257,22): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(258,25): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(281,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(282,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(286,18): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(286,39): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(287,21): run-time error CSS1039: Token not allowed after unary operator: '-font-h3'
(291,25): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(299,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(300,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(301,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(307,22): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-paragraph-gap'
(312,18): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-heading-margin-top'
(312,59): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-heading-margin-bottom'
(314,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(315,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(346,17): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-figure-width'
(347,18): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(356,18): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-figure-border'
(357,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(358,22): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-figure-shadow'
(363,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(364,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(365,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(366,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(379,21): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(386,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(387,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(388,25): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(389,37): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(391,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(392,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(393,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(405,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(411,21): run-time error CSS1039: Token not allowed after unary operator: '-font-h3'
(412,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(413,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(419,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(425,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-xs'
(426,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(432,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(433,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(434,17): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(440,15): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(442,21): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(443,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(451,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-xs'
(485,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(486,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(487,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(488,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(489,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(490,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(491,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(492,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(493,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(494,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(496,27): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(497,30): run-time error CSS1039: Token not allowed after unary operator: '-margin-40px'
(528,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(529,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(530,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(531,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(532,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(537,27): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-header-offset'
(538,30): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-padding-bottom'
(543,23): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-hero-content-row-gap'
(568,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(581,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(582,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(583,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(601,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(606,29): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(607,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(622,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(626,21): run-time error CSS1039: Token not allowed after unary operator: '-blog-article-figure-width'
(627,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(637,22): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(638,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(639,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(640,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(657,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(662,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(672,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-md'
(676,29): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(677,25): run-time error CSS1039: Token not allowed after unary operator: '-font-h3'
(678,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(682,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(686,23): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(690,25): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(691,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(696,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(697,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(698,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
 */
/* -----------------------------
   BLOG LIST PAGE
------------------------------ */

#hero.blog-hero {
    min-height: auto;
}

    #hero.blog-hero .hero-container {
        min-height: auto;
        padding-top: var(--margin-40px);
        padding-bottom: var(--margin-40px);
    }


/* -----------------------------
   BLOG LIST
------------------------------ */

#blog-list {
    --blog-grid-gap: var(--text-gap-lg);
    --blog-title-to-grid-gap: clamp(24px, 3vh, 36px);
    --blog-title-size: clamp(34px, 3.2vw, 56px);
    --blog-title-line-height: var(--lh-display);
    --blog-card-height: calc((100vh - (var(--margin-40px) * 2) - var(--blog-grid-gap)) / 2);
    --blog-card-content-padding-x: clamp(18px, 1.4vw, 26px);
    --blog-card-content-padding-y: clamp(16px, 1.3vw, 24px);
    --blog-card-content-gap: var(--text-gap-sm);
    --blog-card-image-ratio: 16 / 6;
    --blog-card-title-size: clamp(21px, 1.35vw, 28px);
    --blog-card-title-line-height: 1.08;
    --blog-card-title-reserved-height: clamp(58px, 5.2vw, 72px);
    --blog-card-text-size: clamp(12px, 0.78vw, 15px);
    --blog-card-text-line-height: 1.18;
    --blog-card-text-reserved-height: clamp(56px, 4.8vw, 76px);
    min-height: calc(100vh - var(--margin-40px));
    padding-top: var(--margin-40px);
    padding-bottom: var(--margin-40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    #blog-list .blog-title {
        padding-left: var(--base-padding-x);
        padding-right: var(--base-padding-x);
        margin-bottom: var(--blog-title-to-grid-gap);
    }

        #blog-list .blog-title small {
            display: block;
            margin-bottom: var(--text-gap-sm);
        }

        #blog-list .blog-title h2 {
            margin: 0;
            max-width: 100%;
            font-size: var(--blog-title-size);
            line-height: var(--blog-title-line-height);
        }

    #blog-list .blog-grid {
        width: 100%;
        padding-left: var(--base-padding-x);
        padding-right: var(--base-padding-x);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--blog-grid-gap);
        align-items: stretch;
    }

    #blog-list .blog-card {
        width: 100%;
        min-width: 0;
        height: var(--blog-card-height);
        display: flex;
        flex-direction: column;
        background: var(--white-color);
        border-radius: var(--radius-card);
        overflow: hidden;
        box-shadow: 2px 2px 16px 0 rgba(5, 32, 41, .18);
    }

    #blog-list .blog-card-image {
        display: block;
        width: 100%;
        overflow: hidden;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        flex: 0 0 auto;
    }


        #blog-list .blog-card-image img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: var(--blog-card-image-ratio);
            object-fit: cover;
            border-radius: var(--radius-card) var(--radius-card) 0 0;
        }

    #blog-list .blog-card-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: var(--blog-card-content-padding-y) var(--blog-card-content-padding-x);
        row-gap: var(--blog-card-content-gap);
    }

    #blog-list .blog-card-meta {
        display: flex;
        justify-content: space-between;
        gap: var(--text-gap-sm);
        margin: 0;
        font-size: var(--font-small);
        line-height: var(--lh-label);
        color: rgba(5, 32, 41, .65);
    }


    /* Card title
   Supports h2 during migration and h3 for the new semantic structure.
*/

    #blog-list .blog-card h2,
    #blog-list .blog-card h3 {
        margin: 0;
        min-height: var(--blog-card-title-reserved-height);
        font-size: var(--blog-card-title-size);
        line-height: var(--blog-card-title-line-height);
    }

        #blog-list .blog-card h2 a,
        #blog-list .blog-card h2 a:visited,
        #blog-list .blog-card h2 a:hover,
        #blog-list .blog-card h2 a:focus,
        #blog-list .blog-card h3 a,
        #blog-list .blog-card h3 a:visited,
        #blog-list .blog-card h3 a:hover,
        #blog-list .blog-card h3 a:focus {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: var(--tertiary-color);
            text-decoration: none;
            font-family: Montserrat-SemiBold, sans-serif;
            font-size: var(--blog-card-title-size);
            line-height: var(--blog-card-title-line-height);
        }

    #blog-list .blog-card-content > p {
        margin: 0;
        min-height: var(--blog-card-text-reserved-height);
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--blog-card-text-size);
        line-height: var(--blog-card-text-line-height);
    }

    #blog-list .blog-card-link {
        margin-top: auto;
        color: var(--secondary-color-text);
        text-decoration: none;
        font-family: Montserrat-Bold, sans-serif;
        font-size: var(--font-small);
        line-height: var(--lh-label);
    }

        #blog-list .blog-card-link::after {
            content: "→";
            margin-left: var(--text-gap-sm);
        }
/* -----------------------------
   BLOG ARTICLE HERO
------------------------------ */

.blog-article-hero {
    --blog-article-hero-text-height: 50vh;
    --blog-article-hero-cover-height: 50vh;
    --blog-article-hero-header-offset: clamp(86px, 8vh, 116px);
    --blog-article-hero-padding-bottom: var(--margin-40px);
    --blog-article-hero-content-row-gap: var(--text-gap-md);
    --blog-article-hero-subtitle-size: var(--font-h3);
    --blog-article-hero-subtitle-line-height: var(--lh-body);
    --blog-article-hero-subtitle-color: rgba(5, 32, 41, .85);
    width: 100%;
    background: var(--white-color);
}

.blog-article-hero-container {
    min-height: var(--blog-article-hero-text-height);
    padding: var(--blog-article-hero-header-offset) var(--base-padding-x) var(--blog-article-hero-padding-bottom);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.blog-article-hero-content {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    row-gap: var(--blog-article-hero-content-row-gap);
}

    .blog-article-hero-content small {
        margin: 0;
    }

    .blog-article-hero-content h1 {
        max-width: none;
        margin: 0;
    }

.blog-article-hero-subtitle {
    max-width: 100%;
    margin: 0;
    font-family: Montserrat-Medium, sans-serif;
    font-size: var(--blog-article-hero-subtitle-size);
    line-height: var(--blog-article-hero-subtitle-line-height);
    color: var(--blog-article-hero-subtitle-color);
}

.blog-article-hero-cover {
    width: 100%;
    height: var(--blog-article-hero-cover-height);
    display: flex;
    overflow: hidden;
}

    .blog-article-hero-cover picture,
    .blog-article-hero-cover img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .blog-article-hero-cover img {
        object-fit: cover;
    }


/* -----------------------------
   BLOG ARTICLE BODY
------------------------------ */

.blog-article-body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding: 0 var(--base-padding-x);
    margin-top: var(--margin-80px);
    margin-bottom: var(--margin-80px);
}

.blog-article-layout {
    display: flex;
    width: 100%;
    column-gap: 3vw;
}

.blog-article-sidebar {
    display: flex;
    width: 33.33%;
    flex-direction: column;
    row-gap: 0;
}

.blog-article-main {
    width: 66.67%;
}

.blog-article-main h2,
.blog-article-main h3 {
    font-family: Montserrat-SemiBold, sans-serif;
    line-height: var(--lh-heading);
    color: var(--primary-color);
}

.blog-article-main h3 {
    margin: var(--text-gap-lg) 0 var(--text-gap-sm);
    font-size: var(--font-h3);
}

.blog-article-main h2 {
    margin-bottom: var(--text-gap-sm);
}

/* -----------------------------
   BLOG ARTICLE TEXT RHYTHM
------------------------------ */

.blog-article-main {
    --blog-article-paragraph-gap: clamp(12px, 1.2vw, 18px);
    --blog-article-heading-margin-top: clamp(36px, 5vh, 72px);
    --blog-article-heading-margin-bottom: var(--text-gap-md);
}

.blog-article-main p + p,
.blog-article-main p + ul,
.blog-article-main ul + p {
    margin-top: var(--blog-article-paragraph-gap);
}

.blog-article-main h2,
.blog-article-main h3 {
    margin: var(--blog-article-heading-margin-top) 0 var(--blog-article-heading-margin-bottom);
    font-family: Montserrat-SemiBold, sans-serif;
    line-height: var(--lh-heading);
    color: var(--primary-color);
}

.blog-article-main h2:first-child,
.blog-article-main h3:first-child {
    margin-top: 0;
}

.blog-article-main h2 + p,
.blog-article-main h3 + p,
.blog-article-main h2 + ul,
.blog-article-main h3 + ul {
    margin-top: 0;
}

.blog-article-main figure + h2,
.blog-article-main figure + h3 {
    margin-top: clamp(30px, 5vh, 56px);
}

/* -----------------------------
    BLOG ARTICLE FIGURES 
------------------------------ */

.blog-article-main {
    --blog-article-figure-width: 75%;
    --blog-article-figure-border: 1px solid rgba(5, 32, 41, .12);
    --blog-article-figure-shadow: 2px 2px 16px 0 rgba(5, 32, 41, .12);
}

.blog-article-main figure {
    width: var(--blog-article-figure-width);
    margin: var(--text-gap-lg) auto;
}

.blog-article-main figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    border: var(--blog-article-figure-border);
    border-radius: var(--radius-card);
    box-shadow: var(--blog-article-figure-shadow);
    object-fit: cover;
}

.blog-article-main figure figcaption {
    margin-top: var(--text-gap-sm);
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: var(--secondary-color-text);
    text-align: center;
}

/* -----------------------------
   BLOG ARTICLE SIDEBAR
------------------------------ */

.blog-article-sidebar {
    row-gap: 0;
}

    .blog-article-sidebar a {
        color: var(--tertiary-color);
        text-decoration: none;
    }

.blog-article-author {
    display: flex;
    align-items: center;
    column-gap: var(--text-gap-sm);
    padding-bottom: var(--text-gap-md);
    margin-bottom: var(--text-gap-lg);
    border-bottom: 1.5px solid var(--tertiary-color);
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: var(--tertiary-color);
}

    .blog-article-author img {
        width: 50px !important;
        height: 50px !important;
        flex: 0 0 50px;
    }

.blog-article-popular {
    display: flex;
    flex-direction: column;
    row-gap: var(--text-gap-md);
}

.blog-article-popular-main-title {
    margin: 0;
    font-family: Montserrat-Bold, sans-serif;
    font-size: var(--font-h3);
    line-height: var(--lh-heading);
    color: var(--primary-color);
}

.blog-article-popular-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--text-gap-md);
}

.blog-article-popular-item {
    display: flex;
    flex-direction: column;
    row-gap: var(--text-gap-xs);
    color: var(--tertiary-color);
    text-decoration: none;
}

.blog-article-popular-title {
    font-family: Montserrat-SemiBold, sans-serif;
    font-size: var(--font-body);
    line-height: var(--lh-body);
    color: var(--tertiary-color);
}

.blog-article-popular-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--text-gap-sm);
    font-family: Montserrat-Medium, sans-serif;
    font-size: var(--font-small);
    line-height: var(--lh-label);
    color: rgba(5, 32, 41, .72);
}

.blog-article-popular-date,
.blog-article-popular-read {
    display: inline-flex;
    align-items: center;
    column-gap: var(--text-gap-xs);
}

.blog-article-popular-meta img {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
}



/* -----------------------------
   RESPONSIVE
------------------------------ */

@media only screen and (max-width: 1200px) {

    #blog-list .blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media only screen and (max-width: 1024px) {

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


@media only screen and (max-width: 767px) {

    #blog-list {
        --blog-grid-gap: var(--text-gap-lg);
        --blog-card-height: auto;
        --blog-card-image-ratio: 16 / 8;
        --blog-title-size: var(--font-h2);
        --blog-card-title-size: var(--font-h3);
        --blog-card-title-line-height: var(--lh-heading);
        --blog-card-title-reserved-height: auto;
        --blog-card-text-size: clamp(15px, 4vw, 16px);
        --blog-card-text-line-height: 1.18;
        --blog-card-text-reserved-height: auto;
        min-height: auto;
        padding-top: var(--margin-40px);
        padding-bottom: var(--margin-40px);
        display: block;
    }

    #blog-list .blog-title h2 {
        max-width: 100%;
    }

    #blog-list .blog-grid {
        grid-template-columns: 1fr;
    }

    #blog-list .blog-card {
        height: auto;
    }

        #blog-list .blog-card h2,
        #blog-list .blog-card h3 {
            min-height: 0;
        }

    #blog-list .blog-card-content > p {
        min-height: 0;
        -webkit-line-clamp: none;
    }

    /*-----------------------------
         ARTICLE BLOG - MOBILE       
------------------------------*/

    .blog-article-hero {
        --blog-article-hero-text-height: auto;
        --blog-article-hero-cover-height: auto;
        --blog-article-hero-header-offset: calc(var(--margin-40px) + var(--text-gap-md));
        --blog-article-hero-padding-bottom: var(--margin-40px);
        --blog-article-hero-content-row-gap: var(--text-gap-md);
    }

    .blog-article-hero-container {
        min-height: 0;
        padding-top: var(--blog-article-hero-header-offset);
        padding-bottom: var(--blog-article-hero-padding-bottom);
        align-items: flex-start;
    }

    .blog-article-hero-content {
        row-gap: var(--blog-article-hero-content-row-gap);
    }

    .blog-article-hero-cover {
        height: auto;
        aspect-ratio: 816 / 357;
    }

    .blog-article-hero-cover picture,
    .blog-article-hero-cover img {
        height: 100%;
    }

    .blog-article-hero-cover img {
        width: 100%;
        max-height: none;
        object-fit: cover;
    }

    .blog-article-body {
        align-items: stretch;
    }

    .blog-article-layout {
        flex-direction: column;
        row-gap: var(--text-gap-lg);
    }

    .blog-article-main,
    .blog-article-sidebar {
        width: 100%;
    }

    .blog-article-main {
        order: 1;
    }

    .blog-article-main {
        --blog-article-paragraph-gap: clamp(14px, 3.6vw, 20px);
        --blog-article-heading-margin-top: clamp(34px, 5.5vh, 52px);
        --blog-article-heading-margin-bottom: var(--text-gap-md);
    }

    .blog-article-main figure + h2,
    .blog-article-main figure + h3 {
        margin-top: clamp(28px, 5vh, 44px);
    }

    .blog-article-sidebar {
        order: 2;
    }

    .blog-article-main p + h2,
    .blog-article-main p + h3,
    .blog-article-main ul + h2,
    .blog-article-main ul + h3,
    .blog-article-main .blog-figure + h2,
    .blog-article-main .blog-figure + h3 {
        margin-top: var(--text-gap-lg);
    }

    .blog-article-main h2,
    .blog-article-main h3 {
        margin-bottom: var(--text-gap-sm);
        line-height: var(--lh-heading);
    }

    .blog-article-main h2 + p,
    .blog-article-main h3 + p,
    .blog-article-main h2 + ul,
    .blog-article-main h3 + ul {
        margin-top: 0;
    }

/* -----------------------------
   BLOG ARTICLE FIGURES - MOBILE
------------------------------ */

    .blog-article-main {
        --blog-article-figure-width: 100%;
    }

    .blog-article-main figure {
        width: var(--blog-article-figure-width);
        margin: var(--text-gap-lg) 0;
    }

    .blog-article-main figure img {
        width: 100%;
        height: auto;
    }

    .blog-article-main figure figcaption {
        max-width: 92%;
        margin: var(--text-gap-sm) auto 0;
        font-size: var(--font-small);
        line-height: var(--lh-label);
        color: var(--secondary-color-text);
        text-align: center;
    }

/* -----------------------------
   BLOG ARTICLE SIDEBAR - MOBILE
------------------------------ */

    .blog-article-sidebar {
        row-gap: 0;
        margin-bottom: 0;
    }

    .blog-article-main p + h2,
    .blog-article-main p + h3,
    .blog-article-main ul + h2,
    .blog-article-main ul + h3 {
        margin-top: var(--text-gap-lg);
    }

    .blog-article-main figure + h2,
    .blog-article-main figure + h3 {
        margin-top: var(--text-gap-lg);
    }

    .blog-article-author img {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px;
    }

    .blog-article-popular {
        row-gap: var(--text-gap-md);
    }

    .blog-article-popular-main-title {
        margin-bottom: var(--text-gap-sm);
        font-size: var(--font-h3);
        line-height: var(--lh-heading);
    }

    .blog-article-popular-list {
        row-gap: var(--text-gap-lg);
    }

    .blog-article-popular-item {
        row-gap: var(--text-gap-sm);
    }

    .blog-article-popular-title {
        font-size: var(--font-body);
        line-height: var(--lh-body);
    }

    .blog-article-popular-meta {
        margin-top: 0;
        gap: var(--text-gap-sm);
        font-size: var(--font-small);
        line-height: var(--lh-label);
    }

    .blog-article-popular-meta img {
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 16px;
    }
}