SU-SWS/decanter

///
/// A mixin to create a responsive grid layout.
///
/// @name responsive-grid-gap
///
/// @param {map} $gutters-map - A sass map with the gutters per breakpoint.
///
/// @group mixin
@mixin responsive-grid-gap($gutters-map: $su-responsive-gutters-default) {

  /// Loop through each breakpoint generating the media query and grid.
  @each $breakpoint, $gutter in $gutters-map {

    /// Media Query is passed in.
    @media #{$breakpoint} {
      /// Add column and row gaps based on the responsive breakpoint sizes.
      /// These gaps increase as screen sizes get larger.
      @include grid-gap(map-get($gutters-map, $breakpoint));
    }
  }
}