.container {
  position: relative;
  margin: 0 auto;
  padding: 0;
}

.column, .columns {
  float: left;
  display: inline;
  margin-left: $gutter/2;
  margin-right: $gutter/2;
  &.alpha { margin-left: 0; }
  &.omega { margin-right: 0; }
}

.row { margin-bottom: $gutter; }

@include grid($desktop-container-width, $column-count, $gutter);

//-----------------------------------------------------------------------
// #Tablet
@media only screen and (max-width: 959px) {
  @include grid($tablet-container-width, $column-count, $gutter);

  .container { width: $tablet-container-width; }

  .column, .columns {
    &.alpha { margin-right: 10px; }
    &.omega { margin-left: 10px; } }

  .alpha.omega {
    margin-right: 0;
    margin-left: 0; }
}
//--------------------------------------------------------------------
// #Mobile
@media only screen and (max-width: 767px) {
  .container {
    width: $mobile-container-width;

    .column, .columns {
      margin: 0;
      &.one,
      &.two,
      &.three,
      &.four,
      &.five,
      &.six,
      &.seven,
      &.eight,
      &.nine,
      &.ten,
      &.eleven,
      &.twelve,
      &.thirteen,
      &.fourteen,
      &.fifteen,
      &.sixteen,
      &.one-third,
      &.two-thirds { width: $mobile-column-width; }
    }

    .offset-by-one,
    .offset-by-two,
    .offset-by-three,
    .offset-by-four,
    .offset-by-five,
    .offset-by-six,
    .offset-by-seven,
    .offset-by-eight,
    .offset-by-nine,
    .offset-by-ten,
    .offset-by-eleven,
    .offset-by-twelve,
    .offset-by-thirteen,
    .offset-by-fourteen,
    .offset-by-fifteen { padding-left: 0; }
  }
}

/* #Clearing
================================================== */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
  .row:after,
  .clearfix:after {
    clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

/* You can also use a <br class="clear" /> to clear columns */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}