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

[John-Kim Murphy]

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; 
     } 
   }