#banner picture {
    /*padding-bottom: 50%;*/
    height: 50vw;
    min-height: 500px;
    max-height: calc(90vh - var(--masthead-height) - 120px);
}


:is(#banner,#hero)+.content #first_text { margin-top: -200px;
    padding:calc( var(--wrapper-margin) / 2) 32px;
    padding:64px 32px 80px;
   /* max-height: calc(95vh - var(--masthead-height) - 120px);*/
}

:is(#banner,#hero)+.content #first_text::before {
    display: block;
    content: "";
    z-index: -1;
    background: #fff;
    position: absolute;
    border-radius: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + var(--wrapper-margin) + var(--wrapper-margin));
    height: calc(100% + var(--wrapper-margin));

    height: 100%;
    box-shadow: 0px 8px 16px 0px rgba(167, 141, 252, 0.20);
}

:is(#banner,#hero)+.content #first_text > :is(h1,p) { margin-bottom: calc(var(--h1_size) * 0.75);}

@media all and (max-width: 1199px) {
    :is(#banner,#hero)+.content #first_text {  }
}


@media all and (max-width: 899px) {
    #banner picture {
        height: 75vw;
    }

    :is(#banner,#hero)+.content #first_text { margin-top: -128px;  padding: 32px 32px; }
    :is(#banner,#hero)+.content #first_text::before { width: calc(100% + 32px);  }
}

@media all and (max-width: 599px) {
    #banner picture {
        height: 66.666vw;
        min-height:380px;

    }

    :is(#banner,#hero)+.content #first_text { margin-top: -128px; padding:24px 32px;   }
    :is(#banner,#hero)+.content #first_text::before { width: 100%;   }
}