// Functions
@function grid-column-width($n) {
  @return $column-width * $n - ($column-margin*($total-columns - $n)/$total-columns);
}

@function grid-offset-length($n) {
  @return grid-column-width($n) + $column-margin;
}

.container {
  position: relative;
  width: 100%;
  max-width: $container-width;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

// For devices larger than 400px
@media (#{$bp-larger-than-mobile}) {
  .container {
    width: $container-width-larger-than-mobile;
    padding: 0;
  }
}

// For devices larger than 550px
@media (#{$bp-larger-than-phablet}) {
  .container {
    width: $container-width-larger-than-phablet;
  }
  .column,
  .columns {
    margin-left: $column-margin;
  }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns          { width: grid-column-width(1);  }
  .two.columns          { width: grid-column-width(2);  }
  .three.columns        { width: grid-column-width(3);  }
  .four.columns         { width: grid-column-width(4);  }
  .five.columns         { width: grid-column-width(5);  }
  .six.columns          { width: grid-column-width(6);  }
  .seven.columns        { width: grid-column-width(7);  }
  .eight.columns        { width: grid-column-width(8);  }
  .nine.columns         { width: grid-column-width(9);  }
  .ten.columns          { width: grid-column-width(10); }
  .eleven.columns       { width: grid-column-width(11); }
  .twelve.columns       { width: 100%; margin-left: 0;  }

  .one-third.column     { width: grid-column-width(4);  }
  .two-thirds.column    { width: grid-column-width(8);  }

  .one-half.column      { width: grid-column-width(6);  }


  // Offsets
  .offset-by-one.column,
  .offset-by-one.columns       { margin-left: grid-offset-length(1);  }
  .offset-by-two.column,
  .offset-by-two.columns       { margin-left: grid-offset-length(2);  }
  .offset-by-three.column,
  .offset-by-three.columns     { margin-left: grid-offset-length(3);  }
  .offset-by-four.column,
  .offset-by-four.columns      { margin-left: grid-offset-length(4);  }
  .offset-by-five.column,
  .offset-by-five.columns      { margin-left: grid-offset-length(5);  }
  .offset-by-six.column,
  .offset-by-six.columns       { margin-left: grid-offset-length(6);  }
  .offset-by-seven.column,
  .offset-by-seven.columns     { margin-left: grid-offset-length(7);  }
  .offset-by-eight.column,
  .offset-by-eight.columns     { margin-left: grid-offset-length(8);  }
  .offset-by-nine.column,
  .offset-by-nine.columns      { margin-left: grid-offset-length(9);  }
  .offset-by-ten.column,
  .offset-by-ten.columns       { margin-left: grid-offset-length(10); }
  .offset-by-eleven.column,
  .offset-by-eleven.columns    { margin-left: grid-offset-length(11); }


  .offset-by-one-third.column,
  .offset-by-one-third.columns  { margin-left: grid-offset-length(4);  }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns { margin-left: grid-offset-length(8);  }

  .offset-by-one-half.column,
  .offset-by-one-half.column   { margin-left: grid-offset-length(6);  }
}


/*
|------------------------------------------------------------------------------
| Self Clearing Goodness
|------------------------------------------------------------------------------
*/
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}


/*
|------------------------------------------------------------------------------
| Media Queries
|------------------------------------------------------------------------------
*/

// Note: The best way to structure the use of media queries is to create the queries
// near the relevant code. For example, if you wanted to change the styles for buttons
// on small devices, paste the mobile query code up in the buttons section and style it
// there.

// Larger than mobile
@media (#{$bp-larger-than-mobile}) {}

// Larger than phablet (also point when grid becomes active)
@media (#{$bp-larger-than-phablet}) {}

// Larger than tablet
@media (#{$bp-larger-than-tablet}) {}

// Larger than desktop
@media (#{$bp-larger-than-desktop}) {}

// Larger than Desktop HD
@media (#{$bp-larger-than-desktophd}) {}