// Media queries
//
// Our breakpoints are not based on actual devices but device ranges.
// We do not know which devices might come on the market, so we don't want to
// depend on this metrics. Also we have named our breakpoints declarative,
// so you can see if it is a min of max value, based on the mixin name.
//
// `@mixin for-phone-only` :  max-width: 599px <br />
// `@mixin for-tablet-portrait-up` :  min-width: 600px <br />
// `@mixin for-tablet-landscape-down ` :  max-width: 899px <br />
// `@mixin for-tablet-landscape-up ` :  min-width: 900px <br />
// `@mixin for-desktop-up` :  min-width: 1200px <br />
// `@mixin for-big-desktop-up` :  min-width: 1800px <br /><br />
// `@mixin for-retina-2` :  min-device-pixel-ratio: 2 <br />
// `@mixin for-retina-3` :  min-device-pixel-ratio: 3
//
// Weight: 2
//
// Style guide: sass.breakpoints


@mixin for-phone-only  {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-down {
  @media (max-width: 899px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

@mixin for-retina-2 {
  @media screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { @content; }
}

@mixin for-retina-3 {
  @media screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) { @content; }
}
