/* === Blog Articles Grid Section === */
.section-blog-articles {
    background-color: var(--color-moonlight);
    padding: 40px 0 80px;
}

.section-blog-articles .container {
    padding: 0 40px;
}

.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Load More */
.blog-articles__load-more {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.blog-articles__btn-load-more {
    padding: 16px 62px;
    font-size: 20px;
    cursor: pointer;
}

.blog-articles__btn-load-more.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* === Article Card -- archive modifier === */

.article-card--archive .article-card__eyebrow {
    color: var(--color-milky-dark);
}

.article-card--archive .article-card__title {
    font-size: 22px!important;
    line-height: 137%;
    a{
        font-size: 22px!important;

        span{
            font-weight: 600;
            display: block;
        }
    }
}
.article-card .article-card__title {
    font-size: 22px!important;
    line-height: 137%;
    a{
        font-size: 22px!important;

        span{
            font-weight: 600;
            display: block;
        }
    }
}

.article-card--archive .article-card__title a {
    font-weight: 600;
}

.article-card--archive .article-card__excerpt {
    /*display: none;*/
}

.article-card--archive .article-card__link {
    font-size: 20px;
    color: var(--color-green-dark);
    margin-top: 0;
}

.article-card--archive {
    gap: 22px;
    position: relative;
}
.article-card--archive .article-card__image{
    &::before{
        content: "";
        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.article-card.article-card--archive .article-card__body {
    padding: 0 10px;
    gap: 10px;
}

.article-card--archive .article-card__body .article-card__link {
    margin-top: 37px;
}

.article-card--archive .article-card__image {
    border-radius: 20px;
}

/* CTA Banner override for blog page - larger border-radius */
.section-blog-articles ~ .section-cta-banner .cta-banner-inner {
    border-radius: 40px;
}

.section-blog-articles ~ .section-cta-banner {
    padding: 20px 0 120px;
}

@media (max-width: 1080px){
    .blog-articles-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}