$desktop-wide: 1679px;
$desktop-width: 1279px;
$tablet: 1023px;
$mobile: 767px;
$mobile-s: 499px;

//  в mobile-first раскомментировать &-above строки 
//  и дописать аналогичные mixins

@mixin desktop-wide-above {
    @media (min-width: $desktop-wide) {
        @content;
    }
}

@mixin desktop-wide {
    @media (max-width: $desktop-wide) {
        @content;
    }
}

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

@mixin desktop {
    @media (max-width: $desktop-width) {
        @content;
    }
}

@mixin tablet-above {
    @media (min-width: $tablet) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: $tablet) {
        @content;
    }
}

@mixin mobile-above {
    @media (min-width: $mobile) {
        @content;
    }
}

@mixin mobile {
    @media (max-width: $mobile) {
        @content;
    }
}

@mixin mobile-s {
    @media (max-width: $mobile-s) {
        @content;
    }
}

@mixin hover {
    @media (hover: hover) {
        &:hover {
            @content;
        }
    }

    @media (hover: none) {
        &:active {
            @content;
        }
    }
}