.custom-heading {
    --custom-heading-gap: 18px;
    width: 100%;
    box-sizing: border-box;
}

.custom-heading,
.custom-heading *,
.custom-heading *::before,
.custom-heading *::after {
    box-sizing: border-box;
}

.custom-heading__inner {
    width: 100%;
    margin-inline: auto;
}

.custom-heading__title {
    margin: 0;
    padding: 0;
}

.custom-heading__before,
.custom-heading__focused,
.custom-heading__after {
    display: inline;
}

.custom-heading__subtitle {
    display: inline-block;
    margin: 0 0 var(--custom-heading-gap);
}

.custom-heading__title + .custom-heading__subtitle {
    margin-top: var(--custom-heading-gap);
    margin-bottom: 0;
}

.custom-heading__description {
    margin-top: var(--custom-heading-gap);
}

.custom-heading__description > :first-child {
    margin-top: 0;
}

.custom-heading__description > :last-child {
    margin-bottom: 0;
}

.custom-heading__description a {
    text-decoration: underline;
}

.custom-heading__separator-wrap {
    width: 100%;
    line-height: 0;
    text-align: left;
}

.custom-heading__separator {
    display: inline-block;
    height: 0;
    border: 0;
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: currentColor;
    width: 20%;
    margin-top: var(--custom-heading-gap);
    margin-bottom: var(--custom-heading-gap);
}

.custom-heading__separator--dashed { border-top-style: dashed; }
.custom-heading__separator--dotted { border-top-style: dotted; }
.custom-heading__separator--double { border-top-style: double; }

.custom-heading__link {
    color: inherit;
    text-decoration: inherit;
}

@media (max-width: 767px) {
    .custom-heading__separator {
        max-width: 100%;
    }
}
