Max width

[maliyshock]

Хорошо бы писать через min width https://cl.ly/1r1H1r0R0b33 @media (max-width: ($menu-desktop-width - 1))

А еще можно использовать миксины типа таких

@mixin for-phone-only {
    @media (max-width: $phone-to) {
        @content;
    }
}

@mixin for-phone-up {
    @media (min-width: $phone-from) {
        @content;
    }
}

@mixin for-tablet-portrait-up {
    @media (min-width: $tablet-portrait) {
        @content;
    }
}

@mixin for-tablet-landscape-up {
    @media (min-width: $tablet-landscape) {
        @content;
    }
}

@mixin for-desktop-up {
    @media (min-width: $desktop) {
        @content;
    }
}

Их вызов https://cl.ly/1P0E2Y361y0c. Улучшает восприятие кода.

[npofopr]

Есть же всё https://github.com/nicothin/NTH-start-project/blob/master/src/scss/mixins/grid-mixins.scss

[nicothin]

Миксины для медиа-условий точно писать не буду. Набор дольше, уровень абстракции — лишний. max-width там для четко ясных целей и решает проблему лучше, чем многократное перебивание, которое придется делать с min-width