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

.main-header {
    position: relative;
    height: 100svh;
    cursor: pointer;
}

.main-header .bg {
    width: 100%;
    height: 100%;
    position: relative;
}

.main-header .bg .bp-multimedia {
    height: 100%;
}

.main-header .bg::before,
.main-header .bg::after {
    content: '';
}

.main-header .bg::after {
    inset: 0;
    position: absolute;
    background: var(--noir);
    opacity: 0.45;
    pointer-events: none;
}

.main-header .bg::before {
    --_s: 3.5rem;
    width: var(--_s);
    height: var(--_s);
    z-index: 1;
    background: url('../../img/patterns/main-header/play.svg');
    position: absolute;
    background-size: contain;

}

.main-header[playing] .bg::before {
    background: url('../../img/patterns/main-header/stop.svg');
    background-size: contain;
}

.main-header .scroll-to {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: fit-content;
    gap: 3rem!important;
}


.main-header .scroll-to::after,
.main-header .scroll-to::before {
    content: '';
    height: 3rem;
    width: 1px;
    background: var(--blossom);
}

.main-header .scroll-to p {
    text-transform: uppercase;
    text-align: center;
    --fw: 600;
    --fs: 1.4rem;
    --ls: 0.1em;
    --lh: 1.25em;
}

@media only screen and (min-width : 961px) {
    .main-header .bg::before {
        bottom: 3rem;
        right: 3rem;
    }

    .main-header .scroll-to p {
        --fs: 1.6rem;
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .main-header .bg::before {
        bottom: 5.3rem;
        right: 3rem;
    }
}

/* @end */