h1,
h2,
h3,
h4,
h5,
h6 {
    hyphens: auto;
    letter-spacing: var(--heading-letter-spacing);
}

h1,
h2,
h3 {
    line-height: 1;
}

.main-uppercase h1,
.main--uppercase h2,
.main--uppercase h3 {
    text-transform: uppercase;
}

h1 {
    @media md {
        font-size: 3.5rem;
        font-weight: normal;
    }
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
    color: theme('colors.primary.500');
}

h4 {
    font-size: 1.375rem;
    color: theme('colors.primary.400');
}

h5 {
    font-size: 1.25rem;
    font-family: 'BaseFontFamily', sans-serif;
    color: theme('colors.gray.900');
}

h6 {
    font-size: 1rem;
    color: theme('colors.gray.900');
}

// Default spacing for elements in inline-editable text nodes.
.c-neos-text {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'HeadingFontFamily', 'BaseFontFamily', serif;
    }

    h1 {
        @screen md {
            font-size: $heading-font-size--35;
        }
    }

    h2 {
        font-size: $heading-font-size--1625;

        @screen md {
            font-size: $heading-font-size--1875;
        }
    }

    h3 {
        font-size: $heading-font-size--15;

        @screen md {
            font-size: $heading-font-size--1625;
        }
    }

    h4 {
        font-size: $heading-font-size--1375;
    }

    h5 {
        font-size: $heading-font-size--125;
    }

    h6 {
        font-size: $heading-font-size;
    }

    h2,
    h3 {
        margin-bottom: 1rem;
    }

    p + h2,
    table + h2,
    ul + h2,
    ol + h2,
    p + h3,
    table + h3,
    ul + h3,
    ol + h3 {
        margin-top: 1.25rem;

        @screen lg {
            margin-top: 2rem;
        }
    }
}
