mixins media query

$xsmall: 320px;
$small: 544px;
$medium: 767px;
$large: 992px;
$xlarge: 1200px;
$laptopl: 1440px;
$sixteen: 1600px;

@mixin media-breakpoint($media) {
  @if $media == xs {
    @media only screen and (max-width: $xsmall) { @content; }
  }
  @else if $media == sm {
    @media only screen and (min-width: $xsmall + 1) and (max-width: $small) { @content; }
  }
  @else if $media == md {
    @media only screen and (min-width: $small + 1) and (max-width: $medium) { @content; }
  }
  @else if $media == lg {
    @media only screen and (min-width: $medium + 1) and (max-width: $large) { @content; }
  }
  @else if $media == xl {
    @media only screen and (min-width: $large + 1) and (max-width: $xlarge) { @content; }
  }
  @else if $media == laptopl {
    @media only screen and (min-width: $xlarge + 1) and (max-width: $laptopl) { @content; }
  }
  @else if $media == laptopxl {
    @media only screen and (min-width: $laptopl + 1) and (max-width: $sixteen){ @content; }
  }
}

@mixin media-breakpoint-width($min-width, $max-width) {
  @media only screen and (min-width: $min-width) and (max-width: $max-width) { @content; }
}