.block-banner {
    padding-top   : 5em !important;
    padding-bottom: 3em !important;
    min-height    : 300px;
    position      : relative;
    overflow      : clip;
}

.block-banner .radial-gradient {
    position  : absolute;
    inset     : -300px 0 0 0;
    left      : 10%;
    background: radial-gradient(circle, rgba(11, 89, 152, 0) 12%, rgba(11, 89, 152, 1) 65%);
    z-index   : 1;
    width     : 100%;
    max-width : 1300px;
    scale     : 1.4 1;
}

.block-banner:has(.newsletter-signup) .radial-gradient {
    background: radial-gradient(circle, rgba(11, 89, 152, 0) 12%, rgba(11, 89, 152, 1) 56%);
}

.block-banner .radial-gradient::before,
.block-banner .radial-gradient::after {
    content         : '';
    display         : block;
    background-color: #0B5998;
    position        : absolute;
    inset           : 0 100% 0 auto;
    width           : 100vw;
    z-index         : 1;
}

.block-banner .radial-gradient::after {
    inset: 0 auto 0 100%;
}

.block-banner .logo-container {
    display  : block;
    position : relative;
    z-index  : 2;
    max-width: min(36vw, 350px);

    svg {
        width : 100%;
        height: auto;
    }
}

.block-banner .video-play-pause {
    display     : block;
    position    : absolute;
    cursor      : pointer;
    z-index     : 2;
    inset       : auto 2em 3em auto;
    width       : 70px;
    aspect-ratio: 1;

    svg {
        width: 100%;
    }

    .play {
        display: none;
    }

    &.paused {
        .play {
            display: revert;
        }

        .pause {
            display: none;
        }
    }
}

.block-banner .main-menu-container {
    position  : relative;
    z-index   : 2;
    text-align: right;
}

.block-banner::before {
    content          : '';
    background-image : url('assets/wave.svg');
    background-repeat: no-repeat;
    background-size  : contain;
    position         : absolute;
    inset            : 0;
    z-index          : 2;
    max-width        : min(50%, 600px);
}

.block-banner .main-menu-container li {
    font-weight: 600;
}

.block-banner .main-menu-container a {
    justify-content: end !important;
    padding-block  : 0 !important;
    min-height     : 30px !important;
    color          : white;
}

.block-banner .main-menu-container li.cta a {
    background-color: var(--secondary);
    width           : auto;
    margin          : .8em 1em 0 0;
}

.block-banner .main-menu-container li.cta a:is(:hover, :focus) {
    background-color: var(--secondary) !important;
}

.block-banner form :is(input, select) {
    width: 65%;
    max-width: 470px;
    min-height: 3.2em !important;
    background-color: var(--medium) !important;
    border-width: 2px;
    border-color: var(--light) !important;
    font-size: 18px !important;
}

.block-banner form .column {
    --gapy: .6em;
}

.block-banner form ::-webkit-input-placeholder {
    color: #fff;
}

.block-banner form ::placeholder {
    color: #fff;
}

#menu-wrapper {
    max-width: max-content !important;
}
@media screen and (max-width: 36em) {
    .block-banner .logo-container {
        translate: 0 -20px;
    }
}

@media screen and (max-width: 51.99em) {

    #mobile-button.has-checked {
        position: fixed;
    }

    .block-banner #menu-wrapper {
        background-color: var(--dark) !important;
        min-width: 220px;
        padding-inline: 1em;
        min-height: 100svh;
        z-index: 3;
        position: fixed;
    }
}

@media screen and (min-width: 800px) {
    .block-banner {
        padding-top   : 10em !important;
        padding-bottom: 10em !important;
    }

    .block-banner:has(.newsletter-signup) {
        padding-bottom: 3.5em !important;
    }

    .block-banner .main-menu-container {
        margin-top: -7em;
    }

     .block-banner .video-play-pause {
        width: 100px;
        inset       : auto 3em 3em auto;
    }

    .block-banner .radial-gradient {
        inset: -600px 0 0 0;
    }
}

@media screen and (min-width: 1200px) {
    .block-banner .video-play-pause {
        right: calc(50% + -560px);
    }
}

@media screen and (min-width: 1500px) {
    .block-banner .radial-gradient {
        left     : 20%;
        max-width: 1000px;
    }
}