.article-banner {
    background-color: #005AE8;
    padding-block: 40px;
    position: relative;
    z-index: 0;
}

.intranet .article-banner {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .article-banner {
        padding-bottom: 30px;
    }
}

.article-banner-container {
    width: 100%;
    padding-right: 90px;
    padding-left: 90px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    z-index: 9;
}

@media (max-width: 991.98px) {
    .article-banner-container {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (min-width: 576px) {
    .article-banner-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .article-banner-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .article-banner-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .article-banner-container {
        max-width: 1400px;
    }
}

.article-banner-image {
    display: none;
}

.article-banner-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    color: #fff;
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 991.98px) {
    .article-banner-content {
        max-width: 100%;
    }
}

.article-banner-tag {
    align-self: center;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADnSURBVHgB5ZSxDoIwFEUfhuDQOJkwuOHiIpuJJm46i6vOOvhJ/gGu4Kw/oJOyOLGZSOLkB2AfBhRsYwvdPAlDX15u7w0XNC+MY1BIDRSjXFBnDfe7C5yDK8hgd1swGnfYggEVi6JHsiQCXo4PVzC9cTbvgRDuEW7UAJIJYkxCDOgPrNzu1Fnnzp6/ys3w/En2UjBmGN6hKjqUoOiqsqBQZFX8dMiKJx2ZkPqr2LQOIuBu22ryBbF/G/eQlFsEFEs7y3FowGI5hDLobxG5mIhFnRU/hExw4tiw9U/CMRHTbHzNtP/7wT4BsiRPNMUObEgAAAAASUVORK5CYII=) no-repeat 10px center #B1DFFF;
    border-radius: 40px;
    color: #002d97;
    font-size: 14px;
    padding: 2px 10px 2px 35px;
}

.is-error .article-banner-content {
    padding: 150px 0;
}

.is-error .article-banner-content a {
    color: #fff;
}

.article-banner-heading {
    color: #fff;
    margin: 0;
}

.article-banner-heading {
    font-size: clamp(1.875rem, 1.489vw + 1.41rem, 2.75rem);
}

.article-banner-detail {
    display: none;
}

.article-banner-detail {
    font-size: 16px;
}

@media (min-width: 575px) {
    .article-banner-detail {
        font-size: calc(16px + 2 * (100vw - 575px) / 1025);
    }
}

@media (min-width: 1600px) {
    .article-banner-detail {
        font-size: 18px;
    }
}

.article-banner-detail span {
    display: block;
}

.article-banner-detail .paragraph--type--content-authors.paragraph--view-mode--content-banner span {
    display: inline;
}

.article-banner-login {
    display: block;
    margin: 30px auto 0;
    max-width: 450px;
}

.article-banner-login-btn {
    transition: all 0.35s ease;
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 25px;
    padding: 12px 30px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    background-color: #fff;
    border-color: #fff;
    color: #005AE8;
    width: 200px;
}

.article-banner-login-btn {
    font-size: 16px;
}

.prefers-reduced-motion .article-banner-login-btn {
    transition: none;
}

.article-banner-login-btn:hover {
    color: #000;
    background-color: #e6e6e6;
}

.article-banner-login-btn:disabled, .article-banner-login-btn.disabled {
    transition: none;
    opacity: 1;
    box-shadow: none;
    cursor: default;
    background-color: #f2f2f2;
    color: #434343;
    pointer-events: none;
}

.prefers-reduced-motion .article-banner-login-btn:disabled, .prefers-reduced-motion .article-banner-login-btn.disabled {
    transition: none;
}

.article-banner-login-btn:active, .article-banner-login-btn.active {
    background-color: #d9d9d9;
}

.article-banner-login-btn:hover {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

.article-banner-login-btn:active, .article-banner-login-btn.active {
    background-color: #fff;
    border-color: #fff;
    color: #005AE8;
}

.article-banner-login-btn:disabled, .article-banner-login-btn.is-disabled {
    background-color: #f2f2f2 !important;
    border-color: #f2f2f2 !important;
    color: #cccccc !important;
    pointer-events: none;
}

.article-banner.is-event {
    padding-bottom: 210px;
}

.article-banner.is-event:before {
    display: none;
}

@media (max-width: 991.98px) {
    .article-banner.is-event {
        padding-bottom: 150px;
    }
}

@media (max-width: 767.98px) {
    .article-banner.is-event {
        padding-bottom: 90px;
    }
}

/* ARTICLE STORY VARIANT */
.article-banner.story {
    background-color: #002D97;

    .article-banner-tag {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHNSURBVHgBrVQ9TwJBEJ07viI0FtSIHR1KbYI2tJ6tDfoLxMTCSpTKTrS20Mb6bGnExFqgo0RqEj8SLvLtvj33bu84LoTcJJvA3s6bN2/erkLFnxkFGCoFHGG/j1splXYzIdpImnU/elPS38fU6S1uypNhmgG8nMf5yqZC9G3M+Moz8EYlwffTSYWWYghWSLitDengbkRfxjybSy3KgfeuDWp2p4sBBbPTpwE9vI0cRdbjCtXbExNQH/K2cXb7ou+QQJGnjAOv7TFPsAusORiAlQCoHsa4JNgTocrswESAIcqsNbDaPOvz9cwGUipE7dbZWeRgzQFquRBjNyG3BAARAfCslAx98R1O8GTY7DoBW+x/PmPLvJ8Lz1mmw6yUTtpFfH1YrY24hlouYe3JenlFWK4Egd3VoR1aQntuiyCQg0GKsLhCH421BHvIIQyMfVl885t5k3RJZ4shqmOVtRhd6QM6YdMsFSIWUwEApiiOM8WdCNd9oQ+R0KjE+W9UfWTmrrsmD0ZHDAjXEKzdxlbdmgnRcUgwkwNdfBqmBLLJPRnKTG/YLQAbMGz92wkDwB7aPL7/9Xx1FL8HFsAwvPAZGKOA17SXAlwlAn+x/wCb+fDf+8MzrwAAAABJRU5ErkJggg==);
        background-color: #005FF2;
        color: white;
    }
}

/* ARTICLE BLOG VARIANT */
.article-banner.blog {
    background-color: #F2F2F2;

    .article-banner-content,
    .article-banner-heading,
    .breadcrumb-link,
    .breadcrumb-link:before {
        color: #002D97;
    }

    .article-banner-container {
        display: grid;
        grid-gap: 0 100px;
        grid-template-columns: 1fr 370px;

        .block-go-back {
            grid-column: 1 / -1;
        }

        @media (max-width: 991.98px) {
            grid-template-columns: 100%;
        }
    }

    .article-banner-content {
        align-self: center;
        justify-content: unset;
        margin: 0;
        max-width: 100%;
        text-align: unset;

        @media (max-width: 991.98px) {
            justify-content: center;
            text-align: center;
        }
    }

    .article-banner-tag {
        align-self: flex-start;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHUSURBVHgBxVQ9T8JQFL0Yo0NhgmCCC2XRgbJoAtFJu7jALLPMwiyzzOKfgIHFsuiArJAw0S46WCYMBCfsIAve87SkJZWPhMSTvOTxeu95595zH74HczqlDWKLNoz/IdQ0nepad5VQ2l4WMByOqVrp8G5KyZRM4XBgYbxvmSn35SYhwMdLknboKne6KHxxyVDXaLxQNntMl7ywt6wvWokQgfPBht4nRYmIMrHkWIjarZ4rZj5v1sN2u0flu6ZIjDMJVJnmB8XjkVlwTA7x2YgMI8DEJrU4ZzgYUz5/RufqgVshADU3xQuRWCxqokSnCXIsyGevVLp9Er9BJHOsEzOFcjRIA75NloNi4Ua4W+GVTEVFDPYxJr1mIudF4b2AByH3x7Imoh+StPvr6In4Vman/XymcPkgswHT0AIIsOEqWWVVdR5iJ+Cuob+TzgbZF9iwTYMAT8JkMsqvoutyDUozGUUY5UyEukq1Q+l0wnWJixBJqnooDHGSop9w1Qa+lUqPYgLs/noSAihLie9TIV/j8eiLsx8DfEIVzgqFmuhpbq4FwJ9P75lHBiXh3aVYBcZF8u+Q9TnhGT2idCbhlbb8LWPgzbcR2S2Bo85erk24Ljb+B/sN0rzJGdLgY60AAAAASUVORK5CYII=);

        @media (max-width: 991.98px) {
            align-self: center;
        }
    }

    .article-banner-image {
        aspect-ratio: 1.5;
        border-radius: 10px;
        display: block;
        overflow: hidden;
        position: relative;

        img {
            height: 100%;
            width: 100%;
            position: absolute;
            object-fit: cover;
        }

        @media (max-width: 991.98px) {
            display: none;
        }
    }
}

/* image outside of hero banner */
.blog + .article-banner-external-layout {
    display: none;
}

.article-banner-external-layout {
    display: grid;
    grid-gap: 0 60px;
    grid-template-rows: auto;
    grid-template-columns: 100%;
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    margin: 40px auto 0;

    @media (min-width: 576px) {
        max-width: 540px;
    }

    @media (min-width: 768px) {
        max-width: 720px;
    }

    @media (min-width: 992px) {
        grid-template-columns: 1fr 3.5fr 1fr;
        grid-template-areas: "left-rail main-content right-rail";
        padding-right: 90px;
        padding-left: 90px;
        margin: 60px auto 0;
        max-width: 960px;
    }

    @media (min-width: 1200px) {
        max-width: 1400px;
    }

    .article-banner-image {
        border-radius: 10px;
        display: block;
        max-width: 100%;
        overflow: hidden;

        @media (min-width: 992px) {
            grid-area: main-content;
        }
    }
}