/*

*/

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

}

// Clearing //––––––––––––––––––––––––––––––––––––––––––––––––––

// Self Clearing Goodness

.container:after, .row:after, .u-cf {

content: "";
display: table;
clear: both;

}