=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 only screen and (max-width: $width)
    @content