/* Layout (Grid & Structure)
------------------------------------------------------- */

.container {
  margin: 0 auto;
  padding: $container-pad;
  width: 100%; 
  max-width: $container-max-width; 
  text-align: center;  
  @extend .cf;
}

// containers with no L/R padding
// (we have unique containers for the nav elements for better control in mobile modes)
.container--navutility,
.container--navmain,
.container-full {
  @extend .container;
  padding: 0;
}

.container--navutility { background-color: $utility-nav-holder-bg; }
.container--navmain { background-color: $main-nav-holder-bg; }

// container background colors
.cbg-3 { background-color: $base-color-3; }
.cbg-6 { background-color: $base-color-6; }
.cbg-9 { background-color: $base-color-9; }
.cbg-c { background-color: $base-color-c; }
.cbg-f { background-color: $base-color-f; }

.wrap {
  margin: 0 auto;
  max-width: $wrap-max-width; 
  min-width: $wrap-min-width; 
  text-align: left;
  @extend .cf;
}

// unique containers for the nav elements for better control in mobile modes
.wrap--navutility,
.wrap--navmain {
  @extend .wrap;
}

/*
These padding settings are included with the layout module, 
because they are meant specifically for grid elements. For generic padding 
classes, see base.scss (White Space)
*/
.pad-small { padding: $pad-small; }
.pad { padding: $pad; }
.pad-big { padding: $pad-big; }


/* Multi-Column Grids 
(inspired by the CSS Tricks grids)
------------------------------------------------------- */

$multi-grid-margin: 4%;

[class*='col-'] {
  float: left; 
  margin-right: $multi-grid-margin; 
  .grid &:last-of-type {
    margin-right: 0; 
  }
  border-collapse: collapse !important;
}

.grid {
  width: 100%; 
  &:after {  
    content: "";
    display: table;
    clear: both;
  }
}

/*
Their are duplicates below, 
but it's just to show possible grid combos
*/

.col-1-2 { width: 48%; } 

.col-1-3 { width: 30.6666666667%; } 
.col-2-3 { width: 61.3333333334%; }

.col-1-4 { width: 22%; }
.col-3-4 { width: 66%; }

/* /Multi-Column Grids */


/* Portfolio Display
------------------------------------------------------- */ 

/*
The .counter div is used to add a (non-grid-specific) parent holder, 
so we can address the child divs by count (hence the name)
*/

.counter { 
  margin: 0; 
  padding: 0;  
}
 
.grid .four {
  float: left; 
  display: inline;
  width: 24.25%; 
  margin: 0 1% 1% 0; 
}
.grid .counter .four:nth-child(4n+4) {  
  margin-right: 0;
}

.grid .three {
  float: left; 
  display: inline;
  width: 32.6666666667%; 
  margin: 0 1% 1% 0; 
}
.grid .counter .three:nth-child(3n+3) {  
  margin-right: 0;
}

.grid .two {
  float: left; 
  display: inline;
  width: 49.5%; 
  margin: 0 1% 1% 0; 
}
.grid .counter .two:nth-child(2n+2) {  
  margin-right: 0;
}

/* /Portfolio Display */