Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="header">Signalman</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----

@import "susy";
@import "breakpoint";

$susy: (
  columns: 4,
  gutter-position: split,
  gutter: 1/16
);

$md: 500px;
$lg: 800px;

body {
  @include container(1260px);
}

.feature {
  @include span(4);
  @include breakpoint($md) {
    @include span(2);
  }
  @include breakpoint($lg) {
    @include span(1);
  }
  margin-bottom: 1rem;
  background-color: #aaa;
}

SassMeister-output.css

body {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}

.feature {
  width: 95%;
  float: left;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 1rem;
  background-color: #aaa;
}
@media (min-width: 500px) {
  .feature {
    width: 45%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
}
@media (min-width: 800px) {
  .feature {
    width: 20%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
}

SassMeister-rendered.html

<div class="header">Signalman</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>