@use 'functions' as *;

@mixin size-font($ds, $ms) {
    font-size: mobile-vw($ms);

    &.vh {
        font-size: mobile-vh($ms);
    }

    @include desktop {
        font-size: desktop-vw($ds);

        &.vh {
            font-size: desktop-vh($ds);
        }
    }
}

@mixin h1 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.3;
    @include size-font(30px, 30px);
}

@mixin h1-mono {
    font-family: var(--font-mono);
    font-weight: 400;
    line-height: 1;
    @include size-font(22px, 22px);
}

@mixin p {
    font-family: var(--font-mono);
    font-weight: 400;
    line-height: 1.4;
    @include size-font(12px, 12px);
}