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

.hero-title .wp-block-heading{
    position: relative;
}

.hero-title .wp-block-heading::after {
    content: '';
    width: var(--_w);
    height: 1px;
    background: var(--light-purple);
    margin-top: var(--_bot);
    display: block;
    margin-inline: auto;
}

@media only screen and (min-width : 961px) {
    .hero-title {
        --_w: 76.9rem;
        --_bot: 4.8rem;
    }
}


@media only screen and (min-width : 0) and (max-width : 960px) {
    .hero-title {
        --_w: 100%;
        --_bot: 1rem;
    }
    .hero-title .wp-block-heading {
        --fs: 6.2rem;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .hero-title .wp-block-heading {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .hero-title.animateActive .wp-block-heading {
    animation: fadeUp var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

:where(#wrapper) .hero-title.animateActive .wp-block-heading {
    --delay: 0.3s;
}