@import '../_variable/grid.scss';

@mixin responsive($media-size, $customSize: 600px) {
  @if ($media-size==xl) {
    @media only screen and (min-width: map-get($map: $breakpoints, $key: xl)) {
      @content;
    }
  } @else if ($media-size==lg) {
    @media only screen and (min-width: map-get($map: $breakpoints, $key: md) + 1) and (max-width: map-get($map: $breakpoints, $key: lg) - 1) {
      @content;
    }
  } @else if ($media-size==md) {
    @media only screen and (min-width: map-get($map: $breakpoints, $key: sm) + 1) and (max-width: map-get($map: $breakpoints, $key: md) - 1) {
      @content;
    }
  } @else if ($media-size==sm) {
    @media only screen and (max-width: map-get($map: $breakpoints, $key: sm)) {
      @content;
    }
  } @else if ($media-size==custom) {
    @media only screen and (max-width: $customSize) {
      @content;
    }
  }
}