.container {
  position: relative;
  margin: 0 auto;
  padding: 0;
  & .alpha { margin-left: 0; }
  & .omega { margin-right: 0; }
}

.column, .columns {
  float: left;
  margin-left: $gutter/2;
  margin-right: $gutter/2;
}

.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; 
    & .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;
    & .one,
    & .two,
    & .three,
    & .four,
    & .five,
    & .six,
    & .seven,
    & .eight,
    & .nine,
    & .ten,
    & .eleven,
    & .twelve,
    & .thirteen,
    & .fourteen,
    & .fifteen,
    & .sixteen,
    & .one-third,
    & .two-thirds,
    & .one-half,
    & .one-quarter,
    & .three-quarters 
    { width: $mobile-column-width; }


/*
.two-thirds  { width: (($grid-container-width/3)*2) - $grid-gutter; }
    .one-half    { width: ($grid-container-width/2) - $grid-gutter; }
    .one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
    .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;}
  */
    .column, .columns {
      margin: 0;
    }

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