/* Grid System ===============================================================*/

.container {

max-width: 100%;
width: 100%;
margin: auto;
padding: 0 $gutter;
&.xl {
  width: $xl;
}
&.l {
  width: $l;
}
&.m {
  width: $m;
}
&.s {
  width: $s;
}
@include s() {
  padding: 0 $gutter/2;
}

}

// Rows .row {

margin: 0 (-$gutter/2) $gutter;

// Column Grid
&:after {
  content: "";
  display: table;
  clear: both;
}
&.collapse {
  margin: 0 !important;
  .column {
    padding: 0;
  }
}

// Table Grid
&.table {
  @include table();
  &:after { content: none; }
}
&.xl-table { @include xl() { @include table(); } }
&.l-table { @include l() { @include table(); } }
&.m-table { @include m() { @include table(); } }
&.s-table { @include s() { @include table(); } }

// Reverse Grid
&.reverse { @include reverse(); }
&.xl-reverse { @include xl() { @include reverse(); } }
&.l-reverse { @include l() { @include reverse(); } }
&.m-reverse { @include m() { @include reverse(); } }
&.s-reverse { @include s() { @include reverse(); } }

}

// Column Grid .column {

float: left;
min-height: 0.125rem;
padding: 0 $gutter/2;

} @for $i from 1 through 12 {

.column.l#{$i} {
  width: percentage($i/12);
}

} @include m() {

@for $i from 1 through 12 {
  .column.m#{$i} {
    width: percentage($i/12);
  }
}

} @include s() {

@for $i from 1 through 12 {
  .column.s#{$i} {
    width: percentage($i/12);
  }
}

}

// Uniform Height Clearing @include l() {

.column.l2:nth-child(6n+1) { clear: both; }
.column.l3:nth-child(4n+1) { clear: both; }
.column.l4:nth-child(3n+1) { clear: both; }
.column.l6:nth-child(2n+1) { clear: both; }

} @include m() {

.column.m2:nth-child(6n+1) { clear: both; }
.column.m3:nth-child(4n+1) { clear: both; }
.column.m4:nth-child(3n+1) { clear: both; }
.column.m6:nth-child(2n+1) { clear: both; }

} @include s() {

.column.s2:nth-child(6n+1) { clear: both; }
.column.s3:nth-child(4n+1) { clear: both; }
.column.s4:nth-child(3n+1) { clear: both; }
.column.s6:nth-child(2n+1) { clear: both; }

}

// Flex Grid .flex {

@include flex();
@include box-orient--vertical();
@include flex-direction(column);
.row {
  @include flex();
  @include flex-direction(row);
  .box {
    margin: 0 $gutter/2 $gutter;
    flex: auto;
    align-self: center;
    &:first-child {
      margin-left: 0;
    }
    &:last-child {
      margin-right: 0;
    }
    &.center {
      text-align: center;
      align-items: center;
    }
  }
  @include s() {
    @include flex-direction(column);
    .box {
      width: 100%;
      margin: 0 0 $gutter;
    }
  }
}

}

// Grid helpers @include xl() {

.xl-hide { display: none !important; }
.xl-left { text-align: left; }
.xl-center { text-align: center; }
.xl-right { text-align: right; }
.l-show, .m-show, .s-show { display: none !important; }

} @include l() {

.l-hide { display: none !important; }
.l-left { text-align: left; }
.l-center { text-align: center; }
.l-right { text-align: right; }
.xl-show, .m-show, .s-show { display: none !important; }

} @include m() {

.m-hide { display: none !important; }
.m-left { text-align: left; }
.m-center { text-align: center; }
.m-right { text-align: right; }
.l-show { display: none !important; }
.xl-show, .l-show, .s-show { display: none !important; }

} @include s() {

.s-hide { display: none !important; }
.s-left { text-align: left; }
.s-center { text-align: center; }
.s-right { text-align: right; }
.l-show { display: none !important; }
.xl-show, .l-show, .m-show { display: none !important; }

}