/* @group Example
------------------------------------ */

.main-header {
    --transition: 2;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.main-header .bp-multimedia {
    position: relative;
    top: var(--heightNav);
}

.main-header :is(.bp-multimedia, img) {
    transition: calc(var(--transition) * 1s);
}

.main-header .bp-multimedia {
    overflow: hidden;
    width: 100%;
    height: 100%;
    --_op: 50% bottom;
    isolation: isolate;
}

.main-header .bp-multimedia .multimedia::after {
    inset: 0;
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.25) 100%);
    opacity: 1;
    position: absolute;
}

.main-header .bp-multimedia :is(.multimedia, img, #important) {
    object-position: var(--_op);
}

.main-header .wp-block-heading {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
}
.main-header[state="ended"] .wp-block-heading {
    text-shadow: .2rem .2rem .6rem rgba(0,0,0,.75);
}
.main-header .bp-multimedia {
    clip-path: inset(50%);
}

@media only screen and (min-width : 961px) {
    .main-header .wp-block-heading {
        bottom: 4.2vh;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-header {
        height: 100svh;
    }

    .main-header .wp-block-heading {
        bottom: 8.2rem;
        width: 100%;
    }
    .main-header[state="end"] .wp-block-heading {
        text-shadow: .2rem .2rem 1rem rgba(0,0,0,1);
    }

}

/* @end */