media_query_manager.scss

// Media query manager
/*

0 - 600px:      Phone
600 - 900px:    Tablet in portrait 
900 - 1200px:   Tablet in landscape
[1200 - 1800] is where our normal styles apply
1800+:          Big desktop

$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

1em = 16px
*/
@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 37.5em) {
      // 600px
      @content;
    }
  }

  @if $breakpoint == tab-port {
    @media (max-width: 56.25em) {
      // 900px
      @content;
    }
  }

  @if $breakpoint == tab-land {
    @media (max-width: 75em) {
      // 1200 px
      @content;
    }
  }

  @if $breakpoint == big-desktop {
    @media (min-width: 112.5em) {
      // 1800 px
      @content;
    }
  }
}