:root {
    --hero-max-height: 1920;
    --hero-overlay-height: 206;
}
.block-hero {
    position: relative;
    z-index: 0;
    background: var(--light-grey);
    max-height: calc(var(--hero-max-height) * 1px);
    width: 100vw;
    margin: 0 0 0 -50vw;
    left: 50%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
}
.block-hero.no-media {
    border-bottom: 0;
    background: none;
}
[observe-on-scroll] > .hero-bg,
[observe-on-scroll] > .hero-bg::before {
    position: absolute;
    width:100vw;
    height:auto;
    top: 0;
    left:50%;
    transform: translateX(-50vw);
    background-color: var(--mid-grey);
    z-index: -1;
    pointer-events: none;
}
.hero-bg,
.block-hero .kw-media-wrapper {
    position: absolute;
    top:50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--light-grey);
    max-width: 2200px;
    transform: translate(-50%, -50%);
}
.block-hero .kw-media-wrapper {
    background: transparent;
}
.block-hero .overlay,
.block-hero .overlay::after,
.block-hero .overlay::before  {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    z-index: 1;
    height: 100%;
    opacity: 1;
    mix-blend-mode: multiply;
    /*backdrop-filter: blur(10px);*/
    mask:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 33%, black 100%);
}
.block-hero .overlay::before {
    background-color: var(--dark-grey);
    opacity: 1;
    content:"";
    height: 66%;
    top: auto;
    bottom: 0;
    opacity: 0.5;
    mask:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, black 100%);
}
.block-hero .overlay::after {
    background-color: var(--dark-grey);
    opacity: 1;
    content:"";
}
.block-hero .content-container {
    display: none;
    padding: 150px var(--block-padding-x) 150px var(--block-padding-x); 
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    gap:var(--list-gap);
    justify-content: space-between;
    height: 100%;
    align-items: center;
    justify-content: center;
    max-width: var(--maxWidthPX);
    margin: auto auto 0 auto;
}
.block-hero .block-title {
    letter-spacing: 0.003em;
    text-align:center;
    color: var(--white);
    text-shadow: var(--title-shadow);
}
.block-hero .feature-text {
    color:var(--white);
    text-align: center;
    font-size: var(--s48-68);
    text-shadow: var(--title-shadow);
    text-wrap: balance;
}
.block-hero .block-intro-paragraph,
.block-hero p.block-paragraph {
    text-align: center;
    text-wrap: balance;
}
.block-hero .callout {
    padding: calc(var(--block-padding-x) * 0.35);
    position: relative;
    max-width: var(--fluid-100-85);
    display: flex;
    flex-direction: column;
    gap:var(--list-gap);
    z-index: 1;
    /*backdrop-filter: blur(10px);*/
    background: transparent;
    justify-content: center;
    flex-shrink: 1;
    margin: calc(var(--s32-64) - (var(--block-padding-x) * 0.35)) 0;
}
.block-hero .callout::before {
    z-index: -1;
    background: var(--white);
    content: "";
    opacity: 0.75;
    inset: 0;
    position:absolute;
    border-radius: var(--s5-8);
    /*backdrop-filter: blur(10px);*/
    box-shadow: var(--engagement-shadow);
}
.block-hero .hero-content {
    display: flex;
    flex-direction: column;
    z-index: 1;
    justify-content: center;
    align-items: center;
}
.block-hero .no-bg {
    display: block;
    width:100%;
    background: var(--white);
    height: clamp(100px, calc((229 / var(--maxWidth)) * 100vw), calc(229px * 0.6));
}

@media(max-width:768px){
    .block-hero {
        /*max-height: 66vh;*/
        overflow: hidden;
    }
    .block-hero .content-container {
        flex-direction: column;
        text-align: center;
        align-content: center;
        align-items: center;
        padding: var(--s48-68) var(--block-padding-x) calc(var(--block-padding-y) * 2) var(--block-padding-x); 
    }
    .block-hero .content-container .block-title {
        text-wrap: balance;
        text-align: center;
    }
}