/* ==========================================================
   BLOG DETAIL PAGE
========================================================== */

.blog-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: #080C2B;
}


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

.blog-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.blog-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}


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

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

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

    margin: 0 auto;

    padding: 100px 120px 100px;

    box-sizing: border-box;
}


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

.blog-top {
    position: relative;

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

    min-height: 56px;
}


/* ==========================================================
   BACK BUTTON
========================================================== */

.blog-back-button {
    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 56px;
    height: 56px;

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

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;
}

.blog-back-button img {
    width: 40px;
    height: 40px;

    display: block;
}


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

.blog-title {
    position: relative;

    width: fit-content;

    margin: 0 auto 90px;

    text-align: center;

    font-family: 'Geist', sans-serif;

    font-size: 58px;
    line-height: 1;
    font-weight: 800;

    background: linear-gradient(
        180deg,
        #ffffff 10%,
        #ffffff 45%,
        #0066ff 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    box-sizing: border-box;
}


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

.blog-content {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
}


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

.blog-body {
    font-family: "Geist", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.02em;

    color: #E4E6E7;
}

.blog-body p {
    margin: 0 0 10px;
}

.blog-body p:last-child {
    margin-bottom: 0;
}

.blog-body h2,
.blog-body h3,
.blog-body h4 {
    margin: 40px 0 20px;

    font-family: "Geist", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 140%;

    color: #FFFFFF;
}

.blog-body ul,
.blog-body ol {
    margin: 24px 0 42px 40px;
}

.blog-body li {
    margin-bottom: 16px;
}

.blog-body a {
    color: #4D9DFF;
    text-decoration: none;
}

.blog-body a:hover {
    text-decoration: underline;
}


/* ==========================================================
   VIEW ALL — CONTAINER
========================================================== */

.blog-container:has(.blog-list-page) {
    max-width: 1582px;

    padding-left: 73px;
    padding-right: 73px;

    box-sizing: border-box;
}


/* ==========================================================
   VIEW ALL — CONTENT
========================================================== */

/*
   The normal .blog-content is limited to 1000px.
   View-All needs the full available width so the
   1436px grid can be centered correctly.
*/

.blog-container:has(.blog-list-page) .blog-content {
    width: 100%;
    max-width: none;

    margin: 0;
}


/* ==========================================================
   VIEW ALL — PAGE
========================================================== */

.blog-list-page {
    width: 100%;
}


/* ==========================================================
   VIEW ALL — GRID
========================================================== */

.blog-list-page .blog-grid {
    width: 1470px;
    max-width: 1470px;

    margin-left: auto;
    margin-right: auto;

    display: grid;

    grid-template-columns: 700px 700px;

    column-gap: 70px;
    row-gap: 70px;

    align-items: start;
}


/* ==========================================================
   VIEW ALL — CARD
========================================================== */

.blog-list-page .blog-card {
    width: 700px;
    height: 515px;

    box-sizing: border-box;
}

/* ==========================================================
   VIEW ALL — CARD IMAGE
========================================================== */

.blog-list-page .blog-card-image {
    display: block;

    width: 600px;
    height: 236px;

    margin: 27px auto 0;

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

    border-radius: 20px;
}


/* ==========================================================
   VIEW ALL — CARD CONTENT
========================================================== */

.blog-list-page .blog-card-content {
    height: calc(515px - 236px);

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    padding: 14px 27px 27px;
}


/* ==========================================================
   VIEW ALL — CARD TITLE
========================================================== */

.blog-list-page .blog-card-title {
    margin: 0;

    font-family: "Geist", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0;

    color: #FFFFFF;

    /* Keep title aligned with description/read more */
    text-align: left;

    /* Always reserve space for 2 lines */
    min-height: 57.6px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* ==========================================================
   VIEW ALL — CARD DESCRIPTION
========================================================== */

.blog-list-page .blog-card-description {
    margin: 12px 0 0;

    font-family: "Geist", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0;

    color: #E4E6E7;

    /* Same horizontal alignment as title */
    text-align: left;

    /* Always reserve space for 2 lines */
    min-height: 48px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* ==========================================================
   VIEW ALL — READ MORE
========================================================== */

.blog-list-page .blog-read-more {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    gap: 8px;

    /* Push Read More to the same bottom position
       on every card */
    margin-top: auto;

    font-family: "Geist", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;

    color: #FFB000;

    text-decoration: none;
}


/* ==========================================================
   VIEW ALL — READ MORE ARROW
========================================================== */

.blog-list-page .blog-read-more-arrow {
    display: block;

    width: 16px;
    height: 16px;

    object-fit: contain;
}


/* ==========================================================
   RESPONSIVE — 1680px DESKTOP
========================================================== */

@media (max-width: 1680px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;

        padding: 90px 70px 90px;
    }


    /* ------------------------------------------------------
       TOP SECTION
    ------------------------------------------------------ */

    .blog-top {
        min-height: 52px;
    }


    /* ------------------------------------------------------
       BACK BUTTON
    ------------------------------------------------------ */

    .blog-back-button {
        width: 52px;
        height: 52px;
    }

    .blog-back-button img {
        width: 38px;
        height: 38px;
    }


    /* ------------------------------------------------------
       PAGE TITLE
    ------------------------------------------------------ */

    .blog-title {
        font-size: 52px;
        line-height: 1;

        margin-bottom: 80px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;

        padding-left: 70px;
        padding-right: 70px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTENT
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) .blog-content {
        width: 100%;
        max-width: none;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 60px;
        row-gap: 60px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 500px;
    }


    /* ------------------------------------------------------
       CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 80px);
        height: 220px;

        margin: 24px auto 0;

        border-radius: 18px;
    }


    /* ------------------------------------------------------
       CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(500px - 220px);

        padding: 14px 24px 24px;
    }


    /* ------------------------------------------------------
       CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 22px;
        line-height: 120%;

        min-height: 52.8px;
    }


    /* ------------------------------------------------------
       CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin-top: 10px;

        font-size: 15px;
        line-height: 150%;

        min-height: 45px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        font-size: 17px;

        gap: 7px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 15px;
        height: 15px;
    }

}


/* ==========================================================
   RESPONSIVE — 1536px DESKTOP
========================================================== */

@media (max-width: 1536px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;

        padding: 80px 55px 80px;
    }


    /* ------------------------------------------------------
       TOP SECTION
    ------------------------------------------------------ */

    .blog-top {
        min-height: 50px;
    }


    /* ------------------------------------------------------
       BACK BUTTON
    ------------------------------------------------------ */

    .blog-back-button {
        width: 50px;
        height: 50px;
    }

    .blog-back-button img {
        width: 36px;
        height: 36px;
    }


    /* ------------------------------------------------------
       PAGE TITLE
    ------------------------------------------------------ */

    .blog-title {
        font-size: 48px;
        line-height: 1;

        margin-bottom: 70px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;

        padding-left: 55px;
        padding-right: 55px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTENT
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) .blog-content {
        width: 100%;
        max-width: none;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 50px;
        row-gap: 50px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 480px;
    }


    /* ------------------------------------------------------
       CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 70px);
        height: 210px;

        margin: 22px auto 0;

        border-radius: 18px;
    }


    /* ------------------------------------------------------
       CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(480px - 210px);

        padding: 14px 22px 22px;
    }


    /* ------------------------------------------------------
       CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 21px;
        line-height: 120%;

        min-height: 50.4px;
    }


    /* ------------------------------------------------------
       CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin-top: 10px;

        font-size: 14px;
        line-height: 150%;

        min-height: 42px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        font-size: 16px;

        gap: 7px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 14px;
        height: 14px;
    }

}


/* ==========================================================
   RESPONSIVE — 1440px DESKTOP
========================================================== */

@media (max-width: 1440px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;

        padding: 70px 45px 70px;
    }


    /* ------------------------------------------------------
       TOP SECTION
    ------------------------------------------------------ */

    .blog-top {
        min-height: 48px;
    }


    /* ------------------------------------------------------
       BACK BUTTON
    ------------------------------------------------------ */

    .blog-back-button {
        width: 48px;
        height: 48px;
    }

    .blog-back-button img {
        width: 34px;
        height: 34px;
    }


    /* ------------------------------------------------------
       PAGE TITLE
    ------------------------------------------------------ */

    .blog-title {
        font-size: 46px;
        line-height: 1;

        margin-bottom: 65px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;

        padding-left: 45px;
        padding-right: 45px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTENT
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) .blog-content {
        width: 100%;
        max-width: none;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 45px;
        row-gap: 45px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 460px;
    }


    /* ------------------------------------------------------
       CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 64px);
        height: 200px;

        margin: 20px auto 0;

        border-radius: 17px;
    }


    /* ------------------------------------------------------
       CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(460px - 200px);

        padding: 13px 20px 20px;
    }


    /* ------------------------------------------------------
       CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 20px;
        line-height: 120%;

        min-height: 48px;
    }


    /* ------------------------------------------------------
       CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin-top: 10px;

        font-size: 14px;
        line-height: 150%;

        min-height: 42px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        font-size: 16px;

        gap: 7px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 14px;
        height: 14px;
    }

}


/* ==========================================================
   RESPONSIVE — 1366px DESKTOP
========================================================== */

@media (max-width: 1367px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;
        padding: 90px 60px 90px;
    }


    /* ------------------------------------------------------
       BLOG HEADER
    ------------------------------------------------------ */

    .blog-top {
        min-height: 52px;
    }

    .blog-back-button {
        width: 52px;
        height: 52px;
    }

    .blog-back-button img {
        width: 38px;
        height: 38px;
    }

    .blog-title {
        font-size: 52px;
        line-height: 1;
        margin-bottom: 80px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;
        padding-left: 60px;
        padding-right: 60px;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 50px;
        row-gap: 50px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 500px;
    }


    /* ------------------------------------------------------
       BLOG CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 70px);
        height: 215px;

        margin: 24px auto 0;

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

        border-radius: 18px;
    }


    /* ------------------------------------------------------
       BLOG CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(500px - 215px);

        padding: 18px 25px 25px;
    }


    /* ------------------------------------------------------
       BLOG CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 22px;
        line-height: 120%;

        min-height: 52.8px;

        margin: 0;
    }


    /* ------------------------------------------------------
       BLOG CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin: 12px 0 0;

        font-size: 15px;
        line-height: 150%;

        min-height: 45px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        gap: 8px;

        font-size: 17px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 15px;
        height: 15px;
    }

}


/* ==========================================================
   RESPONSIVE — 1280px DESKTOP
========================================================== */

@media (max-width: 1280px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;
        padding: 80px 50px 80px;
    }


    /* ------------------------------------------------------
       BLOG HEADER
    ------------------------------------------------------ */

    .blog-top {
        min-height: 50px;
    }

    .blog-back-button {
        width: 50px;
        height: 50px;
    }

    .blog-back-button img {
        width: 36px;
        height: 36px;
    }

    .blog-title {
        font-size: 48px;
        line-height: 1;
        margin-bottom: 70px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;
        padding-left: 50px;
        padding-right: 50px;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 40px;
        row-gap: 40px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 470px;
    }


    /* ------------------------------------------------------
       BLOG CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 60px);
        height: 200px;

        margin: 22px auto 0;

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

        border-radius: 18px;
    }


    /* ------------------------------------------------------
       BLOG CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(470px - 200px);

        padding: 16px 22px 22px;
    }


    /* ------------------------------------------------------
       BLOG CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 21px;
        line-height: 120%;

        min-height: 50.4px;

        margin: 0;
    }


    /* ------------------------------------------------------
       BLOG CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin: 11px 0 0;

        font-size: 15px;
        line-height: 150%;

        min-height: 45px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        gap: 7px;

        font-size: 16px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 15px;
        height: 15px;
    }

}

/* ==========================================================
   RESPONSIVE — 1200px DESKTOP
========================================================== */

@media (max-width: 1200px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;
        padding: 75px 40px 75px;
    }


    /* ------------------------------------------------------
       BLOG HEADER
    ------------------------------------------------------ */

    .blog-top {
        min-height: 48px;
    }

    .blog-back-button {
        width: 48px;
        height: 48px;
    }

    .blog-back-button img {
        width: 34px;
        height: 34px;
    }

    .blog-title {
        font-size: 44px;
        line-height: 1;
        margin-bottom: 65px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 32px;
        row-gap: 40px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 450px;
    }


    /* ------------------------------------------------------
       BLOG CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 50px);
        height: 185px;

        margin: 20px auto 0;

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

        border-radius: 16px;
    }


    /* ------------------------------------------------------
       BLOG CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(450px - 185px);

        padding: 16px 20px 20px;
    }


    /* ------------------------------------------------------
       BLOG CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 20px;
        line-height: 120%;

        min-height: 48px;

        margin: 0;
    }


    /* ------------------------------------------------------
       BLOG CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin: 10px 0 0;

        font-size: 14px;
        line-height: 150%;

        min-height: 42px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        gap: 7px;

        font-size: 16px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 14px;
        height: 14px;
    }

}


/* ==========================================================
   RESPONSIVE — 991px TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 992px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        max-width: 100%;
        padding: 65px 32px 65px;
    }


    /* ------------------------------------------------------
       BLOG HEADER
    ------------------------------------------------------ */

    .blog-top {
        min-height: 46px;
    }

    .blog-back-button {
        width: 46px;
        height: 46px;
    }

    .blog-back-button img {
        width: 32px;
        height: 32px;
    }

    .blog-title {
        font-size: 40px;
        line-height: 1;
        margin-bottom: 60px;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        max-width: 100%;
        padding-left: 32px;
        padding-right: 32px;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

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

        column-gap: 24px;
        row-gap: 32px;
    }


    /* ------------------------------------------------------
       BLOG CARD
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 100%;
        height: 370px;
    }


    /* ------------------------------------------------------
       BLOG CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        width: calc(100% - 36px);
        height: 165px;

        margin: 18px auto 0;

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

        border-radius: 15px;
    }


    /* ------------------------------------------------------
       BLOG CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        height: calc(420px - 165px);

        padding: 15px 18px 18px;
    }


    /* ------------------------------------------------------
       BLOG CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        font-size: 18px;
        line-height: 120%;

        min-height: 43.2px;

        margin: 0;
    }


    /* ------------------------------------------------------
       BLOG CARD DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        margin: 9px 0 0;

        font-size: 13px;
        line-height: 150%;

        min-height: 39px;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        gap: 6px;

        font-size: 15px;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        width: 13px;
        height: 13px;
    }

}



/* ==========================================================
   BLOG LIST PAGE — RESPONSIVE
   CENTER ALIGNED
========================================================== */

@media (max-width:768px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding: 150px 24px 60px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       BLOG HEADER
    ------------------------------------------------------ */

    .blog-top {
        position: relative;

        width: 100%;
        min-height: 44px;

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

        margin: 0 0 45px;
    }


    /* ------------------------------------------------------
       BACK BUTTON
    ------------------------------------------------------ */

    .blog-back-button {
        position: absolute;

        left: 0;
        top: 50%;

        width: 44px;
        height: 44px;

        transform: translateY(-50%);

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

        padding: 0;

        border: none;
        background: transparent;

        z-index: 5;
    }


    .blog-back-button img {
        width: 30px;
        height: 30px;

        display: block;
    }


    /* ------------------------------------------------------
       BLOG TITLE
    ------------------------------------------------------ */

    .blog-title {
        position: relative;

        width: fit-content;
        max-width: calc(100% - 100px);

        margin: 0 auto;

        font-family: "Geist", sans-serif;

        font-size: 34px;
        line-height: 1;
        font-weight: 800;

        text-align: center;

        background: linear-gradient(
            180deg,
            #ffffff 10%,
            #ffffff 45%,
            #0066ff 100%
        );

        -webkit-background-clip: text;
        background-clip: text;

        -webkit-text-fill-color: transparent;
        color: transparent;
    }


    /* ------------------------------------------------------
       HEADER HEART
    ------------------------------------------------------ */

    .blog-top::after {
        position: absolute;

        right: 8px;
        top: 50%;

        transform: translateY(-50%);

        z-index: 5;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding-top: 150px;
        padding-right: 24px;
        padding-bottom: 60px;
        padding-left: 24px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTENT
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) .blog-content {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        box-sizing: border-box;
    }


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

    .blog-list-page {
        width: 100%;

        margin: 0 auto;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        column-gap: 0;
        row-gap: 32px;

        justify-items: center;
        align-items: start;

        margin: 0 auto;

        padding: 0;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       OUTER BLOG CARD
       768px
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 420px;
        max-width: 420px;

        height: 339px;
        min-height: 339px;

        margin: 0 auto;

        box-sizing: border-box;

        flex-shrink: 0;
    }


    /* ------------------------------------------------------
       BLOG CARD IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        display: block;

        width: 365px;
        min-width: 365px;

        height: 155px;
        min-height: 155px;

        margin: 18px auto 0;

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

        border-radius: 15px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       BLOG CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        width: 100%;

        height: calc(339px - 155px - 18px);

        display: flex;
        flex-direction: column;

        margin: 0 auto;

        box-sizing: border-box;

        padding: 14px 28px 18px;
    }


    /* ------------------------------------------------------
       BLOG CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        width: 100%;

        margin: 0;

        font-family: "Geist", sans-serif;

        font-size: 18px;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0;

        color: #FFFFFF;

        text-align: left;

        min-height: 43.2px;
        max-height: 43.2px;

        display: -webkit-box;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        width: 100%;

        margin: 9px 0 0;

        font-family: "Geist", sans-serif;

        font-size: 13px;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0;

        color: #E4E6E7;

        text-align: left;

        min-height: 39px;
        max-height: 39px;

        display: -webkit-box;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        display: inline-flex;

        align-items: center;

        width: fit-content;

        gap: 6px;

        margin-top: auto;

        font-family: "Geist", sans-serif;

        font-size: 15px;
        font-weight: 600;
        line-height: 1;

        color: #FFB000;

        text-decoration: none;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        display: block;

        width: 13px;
        height: 13px;

        object-fit: contain;
    }

}


/* ==========================================================
   BLOG LIST PAGE — MOBILE 480px
========================================================== */

@media (max-width:480px) {

    /* ------------------------------------------------------
       MAIN CONTAINER
    ------------------------------------------------------ */

    .blog-container {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding: 150px 24px 60px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       BLOG HEADER
    ------------------------------------------------------ */

    .blog-top {
        width: 100%;

        min-height: 44px;

        display: flex;

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

        margin: 0 0 45px;
    }


    /* ------------------------------------------------------
       BACK BUTTON
    ------------------------------------------------------ */

    .blog-back-button {
        display: none;
    }


    /* ------------------------------------------------------
       BLOG TITLE
    ------------------------------------------------------ */

    .blog-title {
        width: fit-content;

        max-width: calc(100% - 60px);

        margin: 0 auto;

        text-align: center;

        font-size: 34px;
        line-height: 1;
    }


    /* ------------------------------------------------------
       HEADER HEART
    ------------------------------------------------------ */

    .blog-top::after {
        position: absolute;

        right: 8px;
        top: 50%;

        transform: translateY(-50%);

        z-index: 5;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTAINER
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        padding-top: 150px;
        padding-right: 24px;
        padding-bottom: 60px;
        padding-left: 24px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       VIEW ALL CONTENT
    ------------------------------------------------------ */

    .blog-container:has(.blog-list-page) .blog-content {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        box-sizing: border-box;
    }


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

    .blog-list-page {
        width: 100%;

        margin: 0 auto;
    }


    /* ------------------------------------------------------
       BLOG GRID
    ------------------------------------------------------ */

    .blog-list-page .blog-grid {
        width: 100%;
        max-width: 100%;

        display: grid;

        grid-template-columns: 1fr;

        row-gap: 32px;

        justify-items: center;
        align-items: start;

        margin: 0 auto;

        padding: 0;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       OUTER BLOG CARD
       480px
    ------------------------------------------------------ */

    .blog-list-page .blog-card {
        width: 326px;
        max-width: 326px;

        height: 339px;
        min-height: 339px;

        margin: 0 auto;

        box-sizing: border-box;

        flex-shrink: 0;
    }


    /* ------------------------------------------------------
       BLOG IMAGE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-image {
        display: block;

        width: 281px;
        min-width: 281px;

        height: 155px;
        min-height: 155px;

        margin: 18px auto 0;

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

        border-radius: 15px;

        box-sizing: border-box;
    }


    /* ------------------------------------------------------
       BLOG CARD CONTENT
    ------------------------------------------------------ */

    .blog-list-page .blog-card-content {
        width: 100%;

        height: calc(339px - 155px - 18px);

        display: flex;
        flex-direction: column;

        margin: 0 auto;

        box-sizing: border-box;

        padding: 14px 22px 18px;
    }


    /* ------------------------------------------------------
       BLOG CARD TITLE
    ------------------------------------------------------ */

    .blog-list-page .blog-card-title {
        width: 100%;

        margin: 0;

        font-family: "Geist", sans-serif;

        font-size: 18px;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0;

        color: #FFFFFF;

        text-align: left;

        min-height: 43.2px;
        max-height: 43.2px;

        display: -webkit-box;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       DESCRIPTION
    ------------------------------------------------------ */

    .blog-list-page .blog-card-description {
        width: 100%;

        margin: 9px 0 0;

        font-family: "Geist", sans-serif;

        font-size: 13px;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0;

        color: #E4E6E7;

        text-align: left;

        min-height: 39px;
        max-height: 39px;

        display: -webkit-box;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;

        overflow: hidden;
    }


    /* ------------------------------------------------------
       READ MORE
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more {
        display: inline-flex;

        align-items: center;

        width: fit-content;

        gap: 6px;

        margin-top: auto;

        font-family: "Geist", sans-serif;

        font-size: 15px;
        font-weight: 600;
        line-height: 1;

        color: #FFB000;

        text-decoration: none;
    }


    /* ------------------------------------------------------
       READ MORE ARROW
    ------------------------------------------------------ */

    .blog-list-page .blog-read-more-arrow {
        display: block;

        width: 13px;
        height: 13px;

        object-fit: contain;
    }

}