=media-query($smallerThen)
  @media screen and (max-width: $smallerThen)
    @content

=media-query-larger($largerThen)
  @media screen and (min-width: $largerThen)
    @content

=media-query-height($smallerThen)
  @media screen and (max-height: $smallerThen)
    @content


/**  RESPOND-TO MIXINS  **/

=respond-to($media)
  @if $media == medium
    // Medium is just below 1280px
    @media only screen and (max-width: 1270px)
      @content

  @if $media == small
    // Small is just above 1024px
    @media only screen and (max-width: 1024px)
      @content

  @if $media == mobile
    @media only screen and (max-width: 900px)
      @content

  @if $media == small-mobile
    @media only screen and (max-width: 500px)
      @content


=respond-to-width($width)
  $width : $width + 'px'
  @media screen and (max-width: $width)
    @content

=respond-to-width-beyond($width)
  $width : $width + 'px'
  @media screen and (min-width: $width)
    @content

=respond-to-height($height)
  $height : $height + 'px'
  @media screen and (max-height: $height)
    @content

=respond-to-width-or-height($width, $height)
  $width : $width + 'px'
  $height : $height + 'px'
  @media screen and (max-width: $width), screen and (max-height: $height)
    @content