// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// Breakpoint (v2.0.7)
// Breakpoint Slicer (v1.2)
// ----

@import "breakpoint-slicer";
$slicer-breakpoints: 0 400px 600px 800px 1050px;

$small: 1;
$medium: 2;
$large: 4;

$grid-width: 100%;

* {
  box-sizing: border-box;  
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  height: 100px;
  float: left;
  background-color: #bada55;
  margin-bottom: 20px;
}

@for $i from 1 through 3 {
  .height-#{$i} {
    height: #{$i * 100px};
  }
}

@include at($small){
  .box {
    width: $grid-width / 1;
  }
  body {
    background-color: darkkhaki;
  }
  .box:nth-child(1n+1) {
    background-color: yellow;
    clear: left;
  }
}

@include between($medium,$large - 1){
  .box {
   width: $grid-width / 2; 
  }
  body {
    background-color: papayawhip;
  }

  .box:nth-child(2n+1) {
    background-color: blue;
    clear: left;
  }
}

@include from($large) {
  .box {
    width: $grid-width / 4;
  }
  body {
    background-color: moccasin;
  }
  .box:nth-child(4n+1) {
    background-color: red;
    clear: left;
  }
}