- 
        xxsmall:
 320px
- 
        xsmall:
 400px
- 
        small:
 600px
- 
        medium:
 800px
- 
        large:
 1000px
- 
        xlarge:
 1200px
- 
        xxlarge:
 1400px
- 
        xxxlarge:
 1920px
          - 
        iPhone Portrait: 320px
      
- 
        Galaxy Nexus Portrait: 360px
      
- 
        iPhone 6 Portrait: 375px
      
- 
        iPhone 6 Plus Portrait: 414px
      
- 
        Galaxy Note 3 Portrait: 540px
      
- 
        iPhone Landscape: 568px
      
- 
        Google Nexus 7 Portrait: 604px
      
- 
        Galaxy Nexus Landscape: 640px
      
- 
        iPhone 6 Landscape: 667px
      
- 
        iPhone 6 Plus Landscape: 738px
      
- 
        iPad Portrait: 768px
      
- 
        Galaxy Note 3 Landscape: 960px
      
- 
        Google Nexus 7 Landscape: 966px
      
- 
        iPad Landscape: 1024px
      
- 
        11" MacBook Air: 1366px
      
- 
        13" MacBook Air: 1440px
      
- 
        21.5" iMac: 1980px
      
 
How to use
  
        .c-component-name {
  // Setting a min (mobile first)
  @include bolt-mq(xsmall) {
    background-color: red;
  }
  // Setting a max (desktop first)
  @include bolt-mq($until: xsmall) {
    background-color: blue;
  }
  // Setting a range (adaptive)
  @include bolt-mq($from: medium, $until: xlarge) {
    background-color: yellow;
  }
  // Setting orientation or other media queries
  @include bolt-mq($from: xlarge, $until: xxxlarge, $and: '(orientation: portrait)') {
    background-color: green;
  }
}