//MEDIA QUERY MANAGER
/*
0-600px:       Phone
600-900px:     Tablet Portrait
900-1200px:    Tablet Landscape
1200-1800px:   Desktops and Laptops //this is desktop first (OUR Current STYLES)
1800px+:       Big Desktops


mixin order

@include respond(tab-land){
  }

  @include respond(tab-port){
  }

  @include respond(phone){
  }

  @include respond(big-desktop){
  }


ORDER: BASE + typography > general layout + grid > page layout > components

1em = 16px

breakpoint argument choices
- phone 600px 37.5em
- tab-port 900px 56.25em
- tab-land 1200px 75em
- big-desktop 1800px 112.5em
 */
@mixin respond($breakpoint){
  @if $breakpoint == phone {
    @media only screen and (max-width: 37.5em){ @content }
  }
  @if $breakpoint == tab-port {
    @media  only screen and (max-width: 56.25em){ @content }
  }
  @if $breakpoint == tab-land {
    @media  only screen and (max-width: 75em){ @content }
  }
  @if $breakpoint == big-desktop {
    @media only screen and (min-width: 112.5em){ @content }
  }
}