.mh-heading--customized .mh-heading__heading {
    font-size: 1em
}

.mh-heading__subtitle {
    color: var(--mh-subtitle-color, var(--site-foreground-color));
    display: block;
    font-family: var(--body-font-family);
    font-weight: 400;
    margin-bottom: 10px
}

.mh-heading__heading .mh-heading__subtitle {
    font-size: 1rem
}

.mh-heading__title {
    color: var(--mh-text-color, var(--site-foreground-color));
    display: block
}

.mh-heading[data-text-effect=highlight-underline] .mh-heading__effect,
.mh-heading[data-text-effect=highlight] .mh-heading__effect,
.mh-heading[data-text-effect=underline] .mh-heading__effect {
    position: relative
}

.mh-heading[data-text-effect=highlight-underline] .mh-heading__effect-backdrop,
.mh-heading[data-text-effect=highlight] .mh-heading__effect-backdrop,
.mh-heading[data-text-effect=underline] .mh-heading__effect-backdrop {
    background: var(--mh-highlight-color, currentColor);
    bottom: 0;
    display: block;
    height: var(--mh-highlight-height, .1em);
    left: 0;
    position: absolute;
    transform-origin: left center;
    width: 100%
}

.js .mh-heading[data-text-effect=highlight-underline] .mh-heading__effect-backdrop,
.js .mh-heading[data-text-effect=highlight] .mh-heading__effect-backdrop,
.js .mh-heading[data-text-effect=underline] .mh-heading__effect-backdrop {
    transform: scaleX(0)
}

@media (prefers-reduced-motion) {

    .js .mh-heading[data-text-effect=highlight-underline] .mh-heading__effect-backdrop,
    .js .mh-heading[data-text-effect=highlight] .mh-heading__effect-backdrop,
    .js .mh-heading[data-text-effect=underline] .mh-heading__effect-backdrop {
        transform: none
    }
}

.mh-heading[data-text-effect=highlight-underline] .mh-heading__effect-text,
.mh-heading[data-text-effect=highlight] .mh-heading__effect-text,
.mh-heading[data-text-effect=underline] .mh-heading__effect-text {
    color: var(--mh-highlight-text-color);
    position: relative
}

.js .mh-heading[data-text-effect=highlight-underline].animated .mh-heading__effect-backdrop,
.js .mh-heading[data-text-effect=highlight].animated .mh-heading__effect-backdrop,
.js .mh-heading[data-text-effect=underline].animated .mh-heading__effect-backdrop {
    transform: scaleX(1);
    transition: transform .7s ease-in-out
}

[data-text-effect=gradient] .mh-heading__effect-text {
    background: var(--mh-gradient-bg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    text-fill-color: transparent
}

.mh-underliner,
[data-text-effect] .mh-heading__effect {
    display: inline-block
}

.mh-underliner {
    position: relative
}

.mh-underliner__underline {
    display: block;
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%
}

.mh-underliner__underline path {
    transition: stroke-dasharray .5s ease-in-out, stroke-dashoffset .5s ease-in-out, opacity .5s ease-in-out
}

.animated .mh-underliner__underline path {
    stroke-dashoffset: 0
}

[data-text-effect=outline] .mh-heading__effect {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .02em currentColor
}