/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/styleOurBlogPages?{ versionKey }"/> */

/* BANNER */

.our-blog__banner {
    background-color: var(--ecomm-color-white-04);
}

@media (max-width: 767.98px) {

    .our-blog__banner .dxp-block-two-column-container {
        flex-wrap: wrap;
    }

    .our-blog__banner .dxp-block-two-column-container .dxp-block-two-column-cell {
        width: 100%;
    }

    .our-blog__banner h1,
    .our-blog__banner h2 {
        font-size: 2rem;
    }

}

/* TOP POST */

@media (min-width: 768px) {

    .our-blog__top-post dxp_content_layout-card dxp_content_layout-block-content-region .main-content-container {
        padding-left: 0;
    }

}

@media (max-width: 767.98px) {

    .our-blog__top-post h1,
    .our-blog__top-post h2 {
        font-size: 2rem;
    }

    .our-blog__top-post .dxp-block-two-column-container {
        flex-wrap: wrap;
    }

    .our-blog__top-post .dxp-block-two-column-container .dxp-block-two-column-cell {
        width: 100%;
    }

    .our-blog__top-post .dxp-block-two-column-container .dxp-block-two-column-cell:last-child {
        order: 1;
    }

}

/* OTHER POSTS */

.our-blog__other-posts {
    background-color: var(--ecomm-color-white-04);
}

.our-blog__other-posts dxp_content_layout-grid .slds-grid {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
}

.our-blog__other-posts dxp_content_layout-grid .dxp-grid-item {
    width: calc((100% - 4rem) / 3) !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {

    .our-blog__other-posts h1,
    .our-blog__other-posts h2 {
        font-size: 2rem;
    }

    .our-blog__other-posts dxp_content_layout-grid .slds-grid {
        grid-column-gap: 0;
        grid-row-gap: 1rem;
    }

    .our-blog__other-posts dxp_content_layout-grid .dxp-grid-item {
        width: 100% !important;
    }

}

/* ALL BLOG POSTS */

.our-blog__all-blog-posts {
    background-color: var(--ecomm-color-white-04);
}

/* BLOG ITEM */

.our-blog__item {
    font-size: 1rem;
}

.our-blog__item  h2 {
    font-family: var(--ecomm-heading-2-font-family);
    font-size: var(--ecomm-heading-2-font-size);
    font-style: var(--ecomm-heading-2-font-style);
    font-weight: var(--ecomm-heading-2-font-weight);
    text-decoration: var(--ecomm-heading-2-text-decoration);
    text-transform: var(--ecomm-heading-2-text-transform);
    line-height: var(--ecomm-heading-2-line-height);
    letter-spacing: var(--ecomm-heading-2-letter-spacing);
    color: var(--ecomm-color-heading-2);
}