// media aliases and breakpoints
$screen-sm-min: 600px;
$screen-md-min: 960px;
$screen-lg-min: 1280px;
$screen-xl-min: 1920px;

$screen-xs-max: 599px;
$screen-sm-max: 959px;
$screen-md-max: 1279px;
$screen-lg-max: 1919px;
$screen-xl-max: 5000px;

// media devices
@mixin xs {
  @media screen and (max-width: #{$screen-xs-max}) {
    // phone
    @content;
  }
}

@mixin sm {
  @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
    // small tablet
    @content;
  }
}

@mixin md {
  @media screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max}) {
    // large tablet/small laptop
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max}) {
    // desktop
    @content;
  }
}

@mixin xl {
  @media screen and (min-width: #{$screen-xl-min}) and (max-width: #{$screen-xl-max}) {
    // large desktop
    @content;
  }
}

// max width
@mixin max-sm {
  @media screen and (max-width: #{$screen-xs-max}) {
    @content;
  }
}

@mixin max-md {
  @media screen and (max-width: #{$screen-sm-max}) {
    @content;
  }
}

@mixin max-lg {
  @media screen and (max-width: #{$screen-md-max}) {
    @content;
  }
}

@mixin max-xl {
  @media screen and (max-width: #{$screen-lg-max}) {
    @content;
  }
}

// min width
@mixin min-md {
  @media screen and (min-width: #{$screen-sm-min}) {
    @content;
  }
}

@mixin min-lg {
  @media screen and (min-width: #{$screen-md-min}) {
    @content;
  }
}