$xsmall-break: 600px;
$small-break: 600px;
$medium-break: 1000px;
$large-break: 1200px;

$xsmall-minus-one: $xsmall-break - 1;
$small-minus-one: $small-break - 1;
$medium-minus-one: $medium-break - 1;

@mixin xsmall() {
    // smaller than small-break
    @media screen and (max-width: $xsmall-minus-one) {
        @content;
    }
}
@mixin small() {
    // smaller than small-break
    @media screen and (max-width: $small-minus-one) {
        @content;
    }
}
@mixin small-medium() {
    // smaller than medium-break
    @media screen and (max-width: $medium-minus-one) {
        @content;
    }
}
@mixin medium() {
    // between small and medium-break
    @media screen and (min-width: $small-break) and (max-width: $medium-minus-one) {
        @content;
    }
}
@mixin medium-large() {
    // larger than small-break
    @media screen and (min-width: $small-break) {
        @content;
    }
}
@mixin large() {
    // larger than medium-break
    @media screen and (min-width: $medium-break) {
        @content;
    }
}

@mixin xlarge() {
    // larger than large-break
    @media screen and (min-width: $large-break) {
        @content;
    }
}
