
$columns: 6;
$gutterWidth: 2; // 2% gutter width
$columnWidth: (100 - ( $gutterWidth * ( $columns - 1 ))) / $columns;

@media ( max-width: 47.9375em ) {
  .m-row {

    [class*="m-span"] {
      float: left;
      margin-left: $gutterWidth + 0%;

      &:first-child {
        margin-left: 0;
      }
    }

    @for $i from 1 through 6 {
      .m-span#{$i} {
        width: ($i * $columnWidth) + (($i - 1) * $gutterWidth) + 0%;
      }
    }
  }
}
