$breakpoint-sm: 600px;
$breakpoint-md: 960px;
$breakpoint-lg: 1440px;
$breakpoint-xl: 1920px;

@mixin max-width($breakpoint) {
    @media (max-width: calc(#{$breakpoint} - 1px)) {
        @content;
    }
}

@mixin min-width($breakpoint) {
    @media (min-width: calc(#{$breakpoint} - 1px)) {
        @content;
    }
}

@mixin breakpoint-only($min, $max) {
    @media (min-width: #{$min}) and (max-width: calc(#{$max} - 1px)) {
        @content;
    }
}

@mixin mobile {
    @include max-width($breakpoint-md) {
        @content;
    }
}

@mixin desktop {
    @include min-width($breakpoint-md) {
        @content;
    }
}
