@use "../01-base/breakpoints" as *;

@mixin font-primary{
    font-family: 'Space Grotesk', sans-serif;
}

.heading{
    @include font-primary;
    font-weight: 700;
    &--xl{
        font-size: 3.8rem;
        line-height: 110%;
        @include responsive(tablet){
            font-size: 4.8rem;
        }
        @include responsive(desktop){
            font-size: 4.8rem;
            margin-bottom: 20px;
        }
    }
    &--lg{
        font-size: 3.2rem;
        line-height: 110%;
        @include responsive(desktop){
            font-size: 3.2rem;
        }
    }
    &--md{
        font-size: 24px;
        line-height: 150%;
        margin-bottom: 20px;
        @include responsive(desktop){
            font-size: 2.4rem;
        }
    }
    &--sm{
        font-size: 1.8rem;
        line-height: 150%;
        letter-spacing: 4%;
        margin-bottom: 8px;
        @include responsive(desktop){
            font-size: 1.8rem;
        }
    }
}


@mixin heading--xl{
    @include font-primary;
    font-weight: 700;
    font-size: 3.8rem;
    line-height: 110%;
    @include responsive(tablet){
        font-size: 4.8rem;
    }
    @include responsive(desktop){
        font-size: 4.8rem;
        margin-bottom: 20px;
    }
}
@mixin heading--md {
    @include font-primary;
    font-size: 2.4rem;
    line-height: 150%;
    margin-bottom: 20px;
    @include responsive(desktop) {
        // font-size: 2.4rem;
    }
}
@mixin heading--sm {
    @include font-primary;
    font-size: 1.8rem;
    line-height: 150%;
    letter-spacing: 4%;
    margin-bottom: 8px;
    @include responsive(desktop) {
        font-size: 1.8rem;
    }
}
