/**
 * Column Wrapper
 * Should be the parent of any .o-col* elements.
 */
.o-cols {
  @include each-bp-from {

    @include clearfix;
    clear: both;

    // Negative margin method
    // This lets us use columns with half-gutter paddings, instead of full-gutter right margins,
    // this auto-wrapping without the need for 'margin-right: 0' on the last column of each row
    margin: -$col-gutter/2;

    // Because of the method, all children need
    > *                   { padding-left: $col-gutter/2; padding-right: $col-gutter/2;}
    > *:first-child       { padding-top: $col-gutter/2; }
    > *:last-child        { padding-bottom: $col-gutter/2; }
    
  }
}

@mixin col($width: null) {
  float: left;
  padding-top:    $col-gutter/2;
  padding-bottom: $col-gutter/2;
}
.o-col {
  @include each-bp-from {
    &--1-2   { @include col; width: percentage(1/2); }
    &--1-3   { @include col; width: percentage(1/3); }
    &--2-3   { @include col; width: percentage(2/3); }
    &--1-4   { @include col; width: percentage(1/4); }
    &--3-4   { @include col; width: percentage(3/4); }
    &--right { float: right; }
  }
}