.video-background{
    max-width: 100%;
}

.section-background > .blocks-container > .video-background:first-child{
    margin-top: calc(var(--block-margin) * -1);
}

.section-background > .blocks-container > .video-background:last-child{
    margin-bottom: calc(var(--block-margin) * -1);
}

.video-background-inner{
    --video-height: 40rem;
    --curve-offset: 0rem;
    --header-offset: 0rem;
    height: calc(var(--video-height) + var(--curve-offset) + var(--header-offset));
    position: relative;
    overflow: hidden;
}

main > .blocks-container > .section-background > .blocks-container > .video-background .video-background-inner{
    --header-offset: var(--header-height);
}

.section-background > .blocks-container > .video-background .video-background-inner{
    --curve-offset: var(--curve-height);
}

.video-background :is(iframe, video){
    min-height: 100%;
    min-width: 100%;
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 16 / 9;
}

.video-background iframe{
    border: none;
}

@media (min-width: 992px) and (max-height: 800px){
    .section-background:has( > .blocks-container > .video-background:first-child:last-child) .section-background-curve-bottom svg{
        max-height: calc(var(--curve-height) / 2);
    }
}

@media (min-height: 600px){
    .video-background-inner{
        min-height: 45rem;
        max-height: calc(100vh - 30rem);
    }
}

@media (min-width: 992px){
    .video-background-inner{
        --video-height: calc(100vh - var(--block-margin)); 
    }
}