
$screenBreakpoints: (
        tiny: 320px,
        very-small: 460px,
        small: 600px,
        medium: 768px,
        large: 900px,
        very-large: 1000px,
        extra-large: 1200px
) !default;



@mixin media($min: 0, $max: 0) {
  $minValue: 0;
  $maxValue: 0;

  @if $min != 0 {
    @if map-has-key($screenBreakpoints, $min) {
      $minValue: map-get($screenBreakpoints, $min);
    } @else {
      $minValue: $min;
    }

    @if $max == 0 {
      @media screen and (min-width: $minValue) {
        @content;
      }
    }
  }

  @if $max != 0 {
    @if map-has-key($screenBreakpoints, $max) {
      $maxValue: map-get($screenBreakpoints, $max);
    } @else {
      $maxValue: $max;
    }

    @if $min == 0 {
      @media (max-width: $maxValue - 1) {
        @content;
      }
    }
  }

  @if $min != 0 and $max != 0 {
    @media screen and (min-width: $minValue) and (max-width: $maxValue - 1) {
      @content;
    }
  }
}