Why doesn't font size change work when using a mixin?

Question

HTML

1. I decided to use mixins to change the font size at different screen width changes. in 2. base .less specified a font size of 62.5%
3. in the _variable.less file I created a mixin, where for each resolution I specified a font in %
4. I use this mixin for menu links in the _header.less file
5. in the end why then for 768px screens the font has become a little more than 9px
PS Do not pay attention that the links do not disappear in the mobile version, and are visible simultaneously with the hamburger icon, I will do all this later. I took a training layout from this one, I want to practice in mixins https://lareta064.github.io/Bouncy/

Answer 1

Everything works for you as you wrote in less.
When the screen resolution is greater than 767px

@media(min-width: 768px)

these styles work:

.header__menu a {
    font-size: 150%;
}

When the resolution is less than 768px these are:

.header__menu a {
    font-size: 1.6rem;
}

Remove ".screen-sm" from "header__menu a" and it will always be 1.6rem.