// size-xs = 0    // < 576px
$size-sm: 576;  // >= 576px
$size-md: 640; // >= 768px
$size-lg: 992; // >= 992px
$size-xl: 1200;// >= 1200px

@mixin mediaDown($value) {
    @media (max-width: #{$value}px) {
        @content;
    }
}

@mixin mediaUp($value) {
    @media (min-width: #{$value}px) {
        @content;
    }
}

@mixin mediaBetween($lower, $upper) {
    @media (min-width: #{$lower}px) and (max-width: #{$upper}px) {
        @content;
    }
}

@mixin sm() {
    @include mediaUp($size-sm + 1){
        @content;
    }
}

@mixin md() {
    @include mediaUp($size-md + 1){
        @content;
    }
}

@mixin lg() {
    @include mediaUp($size-lg + 1){
        @content;
    }
}

@mixin xl() {
    @include mediaUp($size-xl + 1){
        @content;
    }
}