//
// $media
//    handhelds
//    wide-handhelds
//    tablets
//    small-screens
//    wide-screens
//

$media-handhelds: 480px !default;
$media-wide-handhelds: 699px !default;
$media-tablets: 960px !default;
$media-small-screens: 1200px !default;
// $media-wide-screens:  !default;

$media-set: (
  handhelds:      "screen and (max-width: #{$media-handhelds})",
  wide-handhelds: "screen and (min-width: #{$media-handhelds}) and (max-width: #{$media-wide-handhelds})",
  tablets:        "screen and (min-width: #{$media-wide-handhelds}) and (max-width: #{$media-tablets})",
  small-screens:  "screen and (min-width: #{$media-tablets}) and (max-width: #{$media-small-screens})",
  wide-screens:   "screen and (min-width: #{$media-small-screens})"
);

@mixin respond-to($medias...) {
  $result: ();
  @each $media in $medias {
    $result: append($result, map-get($media-set, $media), comma);
  }
  @media #{$result} { @content; }
}