.hero-block {color: #fff; position: relative; display: flex; align-items: center; justify-content: center; min-height: 700px; overflow: hidden; isolation: isolate;}
.hero-block::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 46px; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='3600px' height='46px' viewBox='0 0 3600 46' xml:space='preserve'%3E%3Cpath fill='%23FFFFFF' d='M1885.2,0c-31,0-35.8,33.7-75.6,34.6c-0.5,0-1,0-1.6,0s-1.1,0-1.6,0c-39.8-0.9-44.6-34.6-75.6-34.6H0v46h3600V0H1885.2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: auto 100%; background-position: bottom center; }
.hero-block_bg{position: absolute; inset: 0; background-image: var(--hero-bg); background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: -2; }
.hero-block_overlay{position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: -1; opacity: 0; transform: scale(1.2); animation: heroFadeIn 1s ease-out 0.5s both; }
.hero-block_inner { position: relative; z-index: 1; margin: 0 auto; text-align: center; opacity: 0; transform: scale(1.2); animation: heroFadeIn 1s ease-out 0.5s both; max-width: var(--outerwidth-narrow); }
.hero-block:not([style*="--hero-bg"]) {background-color:var(--grey-mid);}

@media (max-width: 600px) {

    .hero-block {min-height: 60vh;}
    .hero-block__inner {padding: 3rem 1.25rem;}

}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}