/*
    Breakpoint mixins
        width or height (w / h)
        less than or equal, greater than or equal (lte, gte)

    Usage:
        When width is below 501px:

        +w-lte(500px) {
            rules
        }
*/

@mixin h-lte($height) {
    @media only screen and (max-height: $height) {
        @content;
    }
}

@mixin h-gte($height) {
    @media only screen and (min-height: $height) {
        @content;
    }
}

@mixin w-lte($width) {
    @media only screen and (max-width: $width) {
        @content;
    }
}

@mixin w-gte($width) {
    @media only screen and (min-width: $width) {
        @content;
    }
}