@mixin make-no-gutters($breakpoints: $grid-breakpoints, $gutter: $grid-gutter-width) {
  .no-gutter-left {
    padding-left: 0;
  }

  .no-gutter-right {
    padding-right: 0;
  }

  .no-gutters {
    padding-right: 0;
    padding-left: 0;
  }


  $breakpoint-values: map-values($breakpoints);
  @each $breakpoint, $bp-min in $breakpoints {

    .no-gutters-#{$breakpoint}  {
      @media (min-width: $bp-min) {
        padding-right: 0;
        padding-left: 0;
      }
    }

    .gutters-#{$breakpoint}  {
      @media (min-width: $bp-min) {
        padding-right: calc($gutter / 2);
        padding-left: calc($gutter / 2);
      }
    }


    .no-gutter-left-#{$breakpoint} {
      @media (min-width: $bp-min) {
        padding-left: 0;
      }
    }

    .gutter-left-#{$breakpoint} {
      @media (min-width: $bp-min) {
        padding-left: calc($gutter / 2);
      }
    }


    .no-gutter-right-#{$breakpoint} {
      @media (min-width: $bp-min) {
        padding-right: 0;
      }
    }

    .gutter-right-#{$breakpoint} {
      @media (min-width: $bp-min) {
        padding-right: calc($gutter / 2);
      }
    }
  }
}