:root {
    --banner-height: 60vh;
}

.article-banner {
    display: grid;
    grid-template-areas:
        "article-banner-gradient"
        "article-banner-content";
    height: var(--banner-height);
    width: 100dvw;
}

.article-banner-background {
    grid-area: overlay;
    width: 100dvw;
    height: var(--banner-height);
    z-index: var(--z-index-last);
    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
    box-shadow: var(--shadow);
}

.article-banner-content {
    grid-area: overlay;
    width: 100dvw;
    height: var(--banner-height);
}