core/hwe/scss/common/break_500px.scss

@import "bootstrap/scss/vendor/rfs";
@import 'bootstrap/scss/mixins/grid';

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

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

@for $i from 1 through 10 {
  .col10-#{$i} {
    @include make-col($i, 10);
  }
}

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

  @for $i from 1 through 10 {
    .col10d-#{$i} {
      @include make-col($i, 10);
    }
  }
}

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