@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-times);
    font-weight: 400;
    letter-spacing: 0.1em;
    @include size-font(42px, 27px);
}

@mixin p {
    font-family: var(--font-times);
    font-weight: 400;
    letter-spacing: 0.03em;
    @include size-font(25px, 18px);
}