// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.6.2)
// ----

@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

div {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.inner{ 
    position: relative;
    @include add-grid(24);
    @include grid-span(24, 1);
    @include add-gutter(20px);
  }
  .col{
    background:black;
    background-clip:content-box;
    padding-bottom: 20px;
    height: 25vh;
    color: white;
    &:nth-child(4n+1){
      @include grid-span(6, 1);
      clear: left;
    }
    &:nth-child(4n+2){
      @include grid-span(6, 7);
    }
    &:nth-child(4n+3){
      @include grid-span(6, 13);
    }
    &:nth-child(4n+4){
      @include grid-span(6, 19);
    }
  }

@include add-grid(200px 1 100px);
@include add-gutter(10px);
@include sgs-change('output', 'calc');

.main {
  @include grid-span(1, 2);
  background: red;
}

.primary-sidebar {
  background: green;
  @include grid-span(1, 1);
}

.secondary-sidebar {
  background: green;
  @include grid-span(1, 3);
}