body.theme-ffb-midnight-sapphire {
    --site-primary-bg-color: #121e5b;
    --site-secondary-bg-color: #0019ff;
    --site-secondary-light-bg-color: #fdf9f4;
    --site-primary-light-bg-color: #f5f0ea;
    --article-author-gap: .125rem;
    --uk-article-display: block;
    --uk-article-border: 0.0625rem solid #b9bdc4;
    --ffb-light-weight: 400;
    --ffb-border-color: #b9bdc4
}

:root {
    --gds-font-color: #20242b;
    --gds-link: #016fad;
}   

   
.cms-article-horizontal-view {
    box-sizing: border-box;
    display: flex;
    max-width: 75rem;
    column-gap: 2rem;
    margin: 0 auto;

    .cms-editorial-card {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        padding-bottom: 1.75rem;
        background-color: var(--site-white-font ,var(--fil-color-base-grey-025));
        border: 1px solid var(--ffb-border-color, transparent);
        border-radius: .25rem;

        .cms-editorial-card-img {
            max-width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
        }

        .cms-article-labels {
            display: flex;
            justify-content: space-between;
        }

        .cms-editorial-card-bg-wrapper+.cms-editorial-card-main {
            .article-customized-tag {
                position: absolute;
                top: 1rem;
                left: 1.5rem;
            }
        }

        .article-customized-tag {
            position: relative;
            top: 1rem;
            margin-right: 1.5rem;
        }

        .cms-editorial-card-main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;

            .cms-editorial-card-category {
                display: flex;
                color: var(--fil-card-color, var(--fil-color-link-base));
                font-weight: 700;
                font-size: 1rem;
                line-height: 1.5rem;
                padding: 1rem 1.5rem 0;
                text-decoration: none;
            }

            .cms-editorial-card-header {
                display: flex;
                font-size: 1.625rem;
                line-height: 1.38462;
                padding: .5rem 1.5rem 0;
                font-weight: 700;
                margin-bottom: 0;
                color: var(--site-primary-bg-color, var(--gds-font-color));

            }

            .cms-editorial-card-desc {
                font-size: 1.125rem;
                line-height: 1.55556;
                padding: 0.5rem 1.5rem 0;
                margin-bottom: 1rem;
            }

            .cms-editorial-card-author {
                margin-top: auto;
                display: flex;
                padding: 0 1.5rem;
                column-gap: 1rem;
                align-items: center;

                &:before {
                    display: block;
                    border-radius: 50%;
                    min-width: 3rem;
                    height: 3rem;
                    background-image: var(--author-photo);
                    background-repeat: no-repeat;
                    content: "";
                    background-size: contain;
                    border: .0625rem solid var(--fil-author-border-color,var(--fil-color-base-grey-100));
                }

                .cms-editorial-card-author-info {
                    .cms-editorial-card-author-link {
                        font-weight: 700;
                        color: var(--site-secondary-bg-color, var(--gds-link));

                        &:hover {
                            color: var(--site-secondary-bg-color, var(--gds-font-color));
                        }
                    }

                    .cms-editorial-card-author-name {
                        font-weight: 700;
                    }

                    .cms-editorial-card-article {
                        color: var(--fil-author-subtext-color,var(--fil-color-base-grey-500));
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1024px) {
        column-gap: 1.5rem;
    }

    @media screen and (max-width: 860px) {
        column-gap: 0;
        row-gap: 1.5rem;
        flex-direction: column;

        .cms-editorial-card {
            flex-direction: row;
            padding-bottom: 0;

            .cms-editorial-card-bg-wrapper {
                flex-grow: 1;
                width: 50%;
                max-width: 50%;
                min-width: 50%;
                min-height: 100%;
                overflow: hidden;

                &>img {
                    aspect-ratio: unset;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                &+.cms-editorial-card-main{
                    .cms-article-labels {
                        justify-content: flex-start;
                        align-items: end;
                    }
                    .article-label {
                        position: static;
                    }
                }
            }

            .cms-editorial-card-author {
                margin-bottom: 1.25rem;
            }
        }
    }

    @media screen and (max-width: 480px) {
        .cms-editorial-card {
            flex-direction: column;

            .cms-editorial-card-bg-wrapper+.cms-editorial-card-main {
                .article-customized-tag {
                    position: absolute;
                    top: 1rem;
                    left: 1rem;
                    margin-left: 0;
                }
            }

            .cms-editorial-card-bg-wrapper {
                max-width: 100%;
                min-width: 100%;
                width: 100%;
                min-height: unset;
            }

            .cms-editorial-card-main{
                .cms-article-labels {
                    justify-content: space-between!important;

                    .article-customized-tag {
                        margin-right: 1rem;
                    }
                }

                .cms-editorial-card-category {
                    padding: 1rem 1rem 0;
                }

                .cms-editorial-card-header, .cms-editorial-card-desc {
                    padding: .5rem 1rem 0;
                }

                .cms-editorial-card-author {
                    padding: 0 1rem;
                }
            }
        }
    }
}

/* -- render for article detail two column -- */
.left-br {
    .cms-article-horizontal-view {
        flex-direction: column;
        row-gap: 2rem;
        padding: 0;
        
        .cms-editorial-card-main, .cms-editorial-card-desc {
            text-align: left;
        }

        @media screen and (max-width: 1024px) {
            flex-direction: row;
            column-gap: 1.5rem;
        }

        @media screen and (max-width: 860px) { 
            flex-direction: column;
            row-gap: 2rem;
            column-gap: 0;
        }
    }
}