.at-headerBanner {
    display: flex;
    flex-wrap: nowrap;
    min-height: 12em;
    background: transparent no-repeat center center;
    background-size: cover;
}

.at-headerBanner[class*='at-headerBanner--ratio'] {
    max-width: 100vw;
    margin-inline: auto;
}

.at-headerBanner--ratio3 {
    aspect-ratio: 3/1;
}

.at-headerBanner--ratio4 {
    aspect-ratio: 4/1;
}

.body--hasGradient .at-headerBanner::after {
    content: '';
    height: 6em;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    max-width: 2000px;
}

@media screen and (min-width: 2000px) {
    .at-headerBanner[class*='at-headerBanner--ratio'],
    .body--hasGradient .at-headerBanner::after {
        max-width: 2000px;
    }
}

.at-headerBanner--hasImage {
    height: 36vh;
    max-height: 95vh;
}

.at-headerBanner--hasText .at-headerBanner__content {
    max-width: 30em;
}

.pageHeader__article .at-headerBanner {
    margin-top: -5rem;
}

.at-headerBanner__content {
    position: relative;
    z-index: +1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 2em;
    text-align: center;
}

.at-headerBanner--hasShadow .at-headerBanner__content {
    text-shadow: 1px 1px .1em rgba(0,0,0,.3);
}

.at-headerBanner__slogan {
    max-width: 600px;
    margin: 2em 0 2em auto;
    text-shadow: 1px 1px .1em rgba(0,0,0,.3);
    max-height: 50%;
    width: 50%;
}

.at-headerBanner--hasShadow .at-headerBanner__slogan {
    filter: drop-shadow(1px 1px 0.1em rgba(0,0,0,.3));
}

.at-headerBanner__title,
.at-headerBanner__text {
    margin-bottom: 0;
    color: #fff;
}

.at-headerBanner__text {
    max-width: 42em;
    margin: 0 auto 1em;
    font-size: 1.4rem;
}

.at-headerBanner__button {
    flex: none;
    width: 33.33%;
    margin: auto;
    font-size: 0.7em;
}

.page_content {
    margin-top: 0;
}

@media screen and (min-width: 768px) {
    .at-headerBanner__content {
        font-size: 2vw;
    }

    .page_content {
        margin-top: -1.5em;
    }
}

/* style > base > design.css: background url weggehaald, anders komt die boven deze header afbeelding te staan */