//----Responsive breakpoints----//

$breakpoints : (
  s: 0px,
  xs:  500px,
  sm:  769px,
  md:  980px,
  lg:  1025px,
  xl:  1201px,
  xxl: 1441px,
  full: 1600px,
) !default;


//----Minimum size----//

@mixin media-min($bp) {

  $value : $bp;
  @if map-has-key($breakpoints, $bp) {
    $value : map-get($breakpoints, $bp);
  }

  @media screen and (min-width: $value) {
    @content;
  }

}


//----Maximum size----//
@mixin media-max($bp) {

  $value : $bp;
  @if map-has-key($breakpoints, $bp) {
    $value : map-get($breakpoints, $bp);
  }

  @media screen and (max-width: $value - 1) {
    @content;
  }
}



//----Between minimum size & maximum size----//
@mixin media-minmax($min, $max) {
  $valueMin : $min;
    @if map-has-key($breakpoints, $min) {
    $valueMin : map-get($breakpoints, $min);
  }

  $valueMax : $max;
  @if map-has-key($breakpoints, $max) {
    $valueMax : map-get($breakpoints, $max);
  }

  @media screen and (min-width: $valueMin) and (max-width: $valueMax - 1) {
    @content;
  }
}