$container-max-widths: (
    md: 500px,
    lg: 1020px,
    xl: 1140px,
    xxl: 1320px
  );

$grid-breakpoints: (
  xs: 0,
  sm: 520px,
  md: 900px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

@mixin media-1000px{
  @media (min-width: map-get($grid-breakpoints, 'md')) {
    @content;
  }
}

@mixin media-500px{
  @media (max-width: calc(map-get($grid-breakpoints, 'md') - .02px)) {
    @content;
  }
}