/**
 * @file
 * Custom Styling Overrides
 *
 */

.clearfix {
  @include clearfix;
}

@include breakpoint($desktop) {

  @include add-grid(12);
  @include add-gutter(1/1);

  .span-3-1 {
    @include grid-span(3, 1);
  }

  .span-3-7 {
    @include grid-span(3, 7);
  }

  .span-3-10 {
    @include grid-span(3, 10);
  }

  .span-4-1 {
    @include grid-span(4, 1);
  }

  .span-5-1 {
    @include grid-span(5, 1);
  }

  .span-6-1 {
    @include grid-span(6, 1);
  }

  .span-6-7 {
    @include grid-span(6, 7);
  }

  .span-8-5 {
    @include grid-span(8, 5);
  }

  .span-9-4 {
    @include grid-span(9, 4);
  }

}


// two column layout
.column-2 {
  @include clearfix;
  > div {
    @include breakpoint($desktop) {
      width: 47%;
      float: left;
      margin-right: 4%;
      &:nth-child(2n) {
        margin-right:0;
        margin-left: 1%;
      }
    }
  }
}

// three column layout
.column-3 {
  @include clearfix;
  > div {
    @include breakpoint($desktop) {
      width: 30%;
      float: left;
      margin-right: 4%;
      &:nth-child(3n) {
        margin-right:0;
        margin-left: 0;
      }
    }
  }
}

// four column layout
.column-4 {
  @include clearfix;
  > div {
    @include breakpoint($desktop) {
      width: 21%;
      float: left;
      margin-right: 4%;
      &:nth-child(4n) {
        margin-right:0;
        margin-left: 0;
      }
    }
  }
}

// two column layout on tablet
.column-2,
.column-3,
.column-4 {
  > div {
    margin-bottom: 30px;
    @include breakpoint($tablet-only){
      float: left;
      margin-right: 2%;
      width: 49%;
      &:nth-child(2n){
        margin-right: 0;
      }
    }
  }
}