/*!* Uitbreidingen op at-banner.css *!*/

.header + .main .at-banner.--hero.--fullwidth:first-of-type {
    padding-bottom: 0;
}

.at-banner.--hero {
    & .at-banner__contentWrapper {
        height: 560px;
    }

    & .at-banner__title {
        font-size: clamp(1.9rem, 6vw, 3.35rem);
        text-shadow: 2px 4px 8px var(--baseDark300);
        hyphens: none;
    }

    & .at-banner__title em {
        font-size: clamp(2.2rem, 6vw, 3.75rem);
        font-style: normal;
    }

    & .at-banner__title:not(:only-child) {
        margin-bottom: var(--marginMedium);
    }

    &.--fullwidth .at-banner__contentWrapper {
        padding-block: var(--marginLarge) 0;
    }

    & .at-banner__contentInnerWrapper:has(.u-buttonWrapper) {
        margin-bottom: -1rem;
    }

    & .at-banner__imageWrapper {
        border-radius: var(--borderRadiusLarge);
    }

    & .at-banner__image {
        filter: blur(6px);
        transform: scale(1.1);
    }

    & .at-banner__extraImageWrapper {
        display: block;
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        align-content: flex-end;
        justify-items: flex-end;
        z-index: 1;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 40px;
        overflow: clip;
    }

    & .at-banner__extraImage {
        position: relative;
        max-width: 450px;
        right: -80px;
        margin-left: auto;
    }

    & .at-banner__imageWrapper::before {
        border-radius: 40px !important;
    }

    & .at-banner__imageWrapper::after {
        content: '';
        display: block;
        height: 70%;
        width: calc(100% - 40px);
        position: absolute;
        right: 0;
        bottom: 0;
        border-bottom-right-radius: 40px;
        border-bottom-left-radius: 40px;
        background-color: var(--primaryColor500);
        opacity: 1;
        backdrop-filter: grayscale(1);
        mix-blend-mode: hard-light;
        -webkit-mask-image: url(banner-mask.svg);
        mask-image: url(banner-mask.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: right bottom;
        mask-position: right bottom;
    }

    & .at-banner__button {
        box-shadow: var(--_buttonBoxShadowHover);
    }
}

@media (min-width: 568px) {
    .--hero .at-banner__extraImage {
        right: -100px;
    }
}

@media (min-width: 900px) {
    .--hero .at-banner__imageWrapper::after {
        -webkit-mask-image: url(banner-mask-l.svg);
        mask-image: url(banner-mask-l.svg);
    }

    .--hero .at-banner__extraImage {
        right: 0;
        max-width: 500px;
    }
}

@media (min-width: 1200px) {
    .--hero .at-banner__extraImage {
        margin-right: var(--marginLarge);
    }
}