Default padding on `.container` is overridden by conditional padding of smallest breakpoint.

[Leftium]

Describe the issue

Default padding on .container is overridden by $first-breakpoint conditional padding.

• Only the smallest breakpoint should have padding: 0. All other larger breakpoints should get non-zero padding.
• However, due to the order of the CSS statements and CSS cascade, all breakpoints end up with 0 padding.
• SASS:

  pico/scss/layout/_container.scss

  Lines 14 to 27 in 6dc6489

  	padding-right: var(#{$css-var-prefix}spacing);
  	padding-left: var(#{$css-var-prefix}spacing);
  	}
  	.container {
  	$first-breakpoint: true;
  	@each $key, $values in $breakpoints {
  	@if $values {
  	@media (min-width: map.get($values, "breakpoint")) {
  	max-width: map.get($values, "viewport");
  	@if $first-breakpoint {
  	$first-breakpoint: false;
  	padding-right: 0;
  	padding-left: 0;

• Resulting CSS:

  pico/css/pico.css

  Lines 669 to 676 in 6dc6489

  	padding-right: var(--pico-spacing);
  	padding-left: var(--pico-spacing);
  	}
  	@media (min-width: 576px) {
  	.container {
  	max-width: 510px;
  	padding-right: 0;

Current Behavior

• Padding is missing on .container

Expected Behavior

• Element .container should have padding (except for smallest breakpoint).

Reproduction URL

• Just inspect CSS compiled from Pico SASS:

  pico/css/pico.css

  Lines 661 to 679 in 6dc6489

  	/**
  	* Container
  	*/
  	.container,
  	.container-fluid {
  	width: 100%;
  	margin-right: auto;
  	margin-left: auto;
  	padding-right: var(--pico-spacing);
  	padding-left: var(--pico-spacing);
  	}
  	@media (min-width: 576px) {
  	.container {
  	max-width: 510px;
  	padding-right: 0;
  	padding-left: 0;
  	}
  	}

[Leftium]

Closed in favor of #669, which explains the issue much more clearly and accurately.