.heading {
    font-weight: $font-weight-bold;
    margin-bottom: 0.7em;
    margin-top: 1em;
    line-height: 1.3;
    font-family: $secondary-font;
    color: $color-emphasisText;

    &--h1 {
        font-size: 3.2rem;
        margin-bottom: 0.4em;

        @include breakpoint($screen-sm) {
            font-size: 4rem;
        }

        @include breakpoint($screen-md) {
            font-size: 4.8rem;
        }

        // @include breakpoint(large) {
        //     font-size: 3.2rem;
        // }
    }

    &--h2 {
        font-size: 2.8rem;
        margin-bottom: 0.5em;

        @include breakpoint($screen-sm) {
            font-size: 3.2rem;
        }

        @include breakpoint($screen-md) {
            font-size: 3.6rem;
        }
    }

    &--h3 {
        font-size: 2.4rem;

        @include breakpoint($screen-sm) {
            font-size: 2.7rem;
        }

        @include breakpoint($screen-md) {
            font-size: 3rem;
        }
    }

    &--h4 {
        font-size: 2rem;

        @include breakpoint($screen-md) {
            font-size: 2.4rem;
        }
    }

    &--h5 {
        font-size: 1.8rem;
    }

    &--h6 {
        font-size: 1.6rem;
        font-weight: $font-weight-semibold;
    }

    &--fullMargin {
        margin-top: 1.5em;
    }

    &--noMargin {
        margin: 0;
    }

    &--weight-lighter {
        font-weight: $font-weight-lighter;
    }

    &--weight-light {
        font-weight: $font-weight-light;
    }

    &--weight-normal {
        font-weight: normal;
    }

    &--weight-semibold {
        font-weight: $font-weight-semibold;
    }

    &--weight-bold {
        font-weight: $font-weight-bold;
    }
}

// @each $kind, $color in $color-presets {
//     .heading--#{$kind} {
//         color: $color;
//     }
// }