@mixin make-margins($margins: $margins-and-gutters, $breakpoints: $grid-breakpoints) {
  .container {
    @each $breakpoint in map-keys($breakpoints) {
      $infix: breakpoint-infix($breakpoint, $breakpoints);

      @include media-breakpoint-up($breakpoint, $breakpoints) {
        @each $margin, $value in $margins {
          &.margin#{$infix}-#{$margin} {
            padding-left: $value;
            padding-right: $value;
          }
        }
      }
    }
  }
}

@mixin make-gutters($gutters: $margins-and-gutters, $breakpoints: $grid-breakpoints) {
  .row {
    @each $breakpoint in map-keys($breakpoints) {
      $infix: breakpoint-infix($breakpoint, $breakpoints);

      @include media-breakpoint-up($breakpoint, $breakpoints) {
        @each $gutter, $value in $gutters {
          &.gutter#{$infix}-#{$gutter} {
            margin-right: ($value / -2);
            margin-left: ($value / -2);

            > .col, >[class^=col-] {
              padding-right: ($value / 2);
              padding-left:  ($value / 2);
            }
          }
        }
      }
    }
  }
}