@import "../variables";

.sg-heading {
    &__h1 {
        @include sgHeading();
        font-size: $size-32px;
        line-height: 1.25;

        @include media-breakpoint-up(md) {
            font-size: $size-48px;
            line-height: 1.05;
        }
    }

    &__h2 {
        @include sgHeading();
        font-size: $size-26px;

        @include media-breakpoint-up(md) {
            font-size: $size-32px;
        }
    }

    &__h3 {
        @include sgHeading();
        font-size: $size-22px;
        line-height: 1.15;

        @include media-breakpoint-up(md) {
            font-size: $size-24px;
            line-height: 1.2;
        }
    }

    &__h4 {
        @include sgHeading4();
    }

    &__h5 {
        @include sgHeading5;
    }

    &__h6 {
        @include sgHeading();
        font-size: $size-14px;
        font-weight: $headings-font-weight;
        line-height: $size-16px;
    }
}

.sg-subheading {
    &__h1 {
        @include sgSubHeading();
        font-size: $size-20px;

        @include media-breakpoint-up(md) {
            font-size: $size-28px;
        }
    }

    &__h2 {
        @include sgSubHeading();
        font-size: $size-18px;

        @include media-breakpoint-up(md) {
            font-size: $size-24px;
        }
    }

    &__h3 {
        @include sgSubHeading();
        font-size: $size-16px;

        @include media-breakpoint-up(md) {
            font-size: $size-20px;
        }
    }

    &__h4 {
        @include sgSubHeading();
        font-size: $size-16px;
    }
}