// Fixed-width, centered column for site content.
.container {
  width: $container-width;
  margin-right: auto;
  margin-left: auto;
  @include clearfix;
}

// Grid system
//
// Create rows with `.columns` to clear the floated columns and outdent the
// padding on `.column`s with negative margin for alignment.

.columns {
  margin-right: -$grid-gutter;
  margin-left: -$grid-gutter;
  @include clearfix;
}

// Base class for every column (requires a column width from below)
.column {
  float: left;
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;
}

// Column widths
.one-third {
  width: 33.333333%;
}

.two-thirds {
  width: 66.666667%;
}

.one-fourth {
  width: 25%;
}

.one-half {
  width: 50%;
}

.three-fourths {
  width: 75%;
}

.one-fifth {
  width: 20%;
}

.four-fifths {
  width: 80%;
}

// Single column hack
.single-column {
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;
}

// Centers content horizontally. Can be used inside or outside the grid.
.centered {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

// Equal width columns via table sorcery.
.table-column {
  display: table-cell;
  width: 1%;
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;
  vertical-align: top;
}