.heading {
    color: var(--color-strong);
    font-weight: 600;
    text-wrap: balance
}

.heading strong {
    font-weight: 700;
    white-space: break-spaces
}

.heading strong {
    color: var(--color-brand)
}

@media (prefers-color-scheme: dark)and (prefers-contrast: more) {
    .heading strong {
        color: var(--color-brand-light)
    }
}

.theme--dark .heading strong {
    color: var(--color-brand)
}

@media (prefers-contrast: more) {
    .theme--dark .heading strong {
        color: var(--color-brand-light)
    }
}

.heading:has(strong) {
    font-weight: 400;
    position: relative;
    z-index: 5
}

@media (prefers-color-scheme: light)and (prefers-color-scheme: light) {
    .module:not(.theme--dark) .heading:not(.heading--no-highlight) strong:last-of-type {
        position: relative
    }
}

.heading span[style*=color] {
    color: var(--color-brand) !important
}