$xxs: 320px;
$galaxy: 360px;
$iphone: 375px;
$iphonePlus: 414px;
$ipadProd: 834px;
$break-xs: 576px;
$break-s: 640px;
$break-m: 768px; // 768px tablet
$kindle: 800px;
$break-lg: 992px; //992px
$break-xl: 1024px; //1024px
$break-xxl: 1200px; // 1200px

$media-query: (
  "xxs": $xxs,
  "galaxy": $galaxy,
  "i": $iphone,
  "iplus": $iphonePlus,
  "iprod": $ipadProd,
  "xs": $break-xs,
  "s": $break-s,
  "m": $break-m,
  "kindle": $kindle,
  "lg": $break-lg,
  "xl": $break-xl,
  "xxl": $break-xxl,
);

@mixin min-from($size) {
  @media only screen and (min-width: map-get($media-query, $size)) {
    @content;
  }
}

@mixin max-from($size) {
  @media only screen and (max-width: map-get($media-query, $size)) {
    @content;
  }
}