.container {
   margin: 0 auto;
   max-width: calc(#{$large-screen} + 80px);
   width: 90%;
}
@media #{$medium-and-up} {
   .container {
      width: 85%;
   }
}
@media #{$large-and-up} {
   .container {
      width: 70%;
   }
}

.container .row {
   margin-left: (-1 * $gutter-width / 2);
   margin-right: (-1 * $gutter-width / 2);
}

.section {
   padding-top: 1rem;
   padding-bottom: 1rem;

   &.no-pad {
      padding: 0;
   }

   &.no-pad-bot {
      padding-bottom: 0;
   }

   &.no-pad-top {
      padding-top: 0;
   }
}

.row {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;
   // Clear floating children
   &:after {
      content: "";
      display: table;
      clear: both;
   }

   .col {
      float: left;
      box-sizing: border-box;
      padding: 0 $col-gutter-width;
      min-height: 1px;

      &[class*="pull-"],
      &[class*="push-"] {
         position: relative;
      }
      $i: 1;
      @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");

         &.s#{$i} {
            width: $perc;
            margin-left: auto;
            left: auto;
            right: auto;
         }
         $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
         $perc: unquote((100 / ($num-cols / $i)) + "%");

         &.offset-s#{$i} {
            margin-left: $perc;
         }

         &.pull-s#{$i} {
            right: $perc;
         }

         &.push-s#{$i} {
            left: $perc;
         }
         $i: $i + 1;
      }
      @media #{$medium-and-up} {
         $i: 1;
         @while $i <= $num-cols {
            $perc: unquote((100 / ($num-cols / $i)) + "%");

            &.m#{$i} {
               width: $perc;
               margin-left: auto;
               left: auto;
               right: auto;
            }
            $i: $i + 1;
         }
         $i: 1;
         @while $i <= $num-cols {
            $perc: unquote((100 / ($num-cols / $i)) + "%");

            &.offset-m#{$i} {
               margin-left: $perc;
            }

            &.pull-m#{$i} {
               right: $perc;
            }

            &.push-m#{$i} {
               left: $perc;
            }
            $i: $i + 1;
         }
      }
      @media #{$large-and-up} {
         $i: 1;
         @while $i <= $num-cols {
            $perc: unquote((100 / ($num-cols / $i)) + "%");

            &.l#{$i} {
               width: $perc;
               margin-left: auto;
               left: auto;
               right: auto;
            }
            $i: $i + 1;
         }
         $i: 1;
         @while $i <= $num-cols {
            $perc: unquote((100 / ($num-cols / $i)) + "%");

            &.offset-l#{$i} {
               margin-left: $perc;
            }

            &.pull-l#{$i} {
               right: $perc;
            }

            &.push-l#{$i} {
               left: $perc;
            }
            $i: $i + 1;
         }
      }
   }
}