Make container padding configurable on a per-breakpoint basis

[Mevrael]

Currently there is only one variable to set $grid-gutter-width which is 30px by default, however, in modern applications on some screens (breakpoints) another gutter size and container padding would be more preferable.

I would suggest adding new map variable and mixin so .container, .row, .col-* and other grid class paddings could be easily configured. Map can be empty if there is no need in chaning spacings for different breakpoints.

Here is an example how I am changing spacers for different screens.

// default main section padding (for > xl)
$app-section-padding-y: 3rem;
$app-section-padding-x: 5rem;

// main section padding for different breakpoints down
$app-section-padding: (
  xl: (3rem, 4rem),
  lg: (2.75rem, 3.5rem),
  md: (2.5rem, 3rem),
  sm: (1.25rem, 2rem)
);


@mixin app-section {
  margin-left: auto;
  margin-right: auto;
  padding: $app-section-padding-y $app-section-padding-x;

  @each $key, $list in $app-section-padding {

    @include media-breakpoint-down($key) {
      padding: nth($list, 1) nth($list, 2);
    }

  }

};

[cvrebert]

The gutter portion is covered by #17481, so I'll trim this to be about container specifically.

[pixelbandito]

I'm going to try to pick this up with the same pattern as #17481, mentioned above.

(But if anyone else beats me to it, welcome!)

[pixelbandito]

I have a PR going through the automated checks right now.

I chose to re-use the same gutters-per-breakpoint variable for container padding and for grid system padding.

@Mevrael Does that sound reasonable to you?