Susy 'Attribute Module' Grid framework

Susy Attribute Module Grid

[am-Grid] {
  float: left;
  width: 100%;
}

[am-Grid]:after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 568px) {
  [am-Grid-Col~="s:1"] {
    width: 20.3125%;
    float: left;
    margin-right: 6.25%;
  }

  [am-Grid-Col~="s:pre1"] {
    margin-left: 26.5625%;
  }

  [am-Grid-Row~="s:end"] {
    margin-right: 0;
    clear: right;
  }

  [am-Grid-Row~="s:start"] {
    clear: left;
  }

  [am-Grid-Col~="s:2"] {
    width: 46.875%;
    float: left;
    margin-right: 6.25%;
  }

  [am-Grid-Col~="s:pre2"] {
    margin-left: 53.125%;
  }

  [am-Grid-Row~="s:end"] {
    margin-right: 0;
    clear: right;
  }

  [am-Grid-Row~="s:start"] {
    clear: left;
  }

  [am-Grid-Col~="s:3"] {
    width: 73.4375%;
    float: left;
    margin-right: 6.25%;
  }

  [am-Grid-Col~="s:pre3"] {
    margin-left: 79.6875%;
  }

  [am-Grid-Row~="s:end"] {
    margin-right: 0;
    clear: right;
  }

  [am-Grid-Row~="s:start"] {
    clear: left;
  }

  [am-Grid-Col~="s:4"] {
    width: 100%;
    float: left;
    margin-right: 6.25%;
  }

  [am-Grid-Col~="s:pre4"] {
    margin-left: 106.25%;
  }

  [am-Grid-Row~="s:end"] {
    margin-right: 0;
    clear: right;
  }

  [am-Grid-Row~="s:start"] {
    clear: left;
  }
}
@media (min-width: 569px) and (max-width: 1024px) {
  [am-Grid-Col~="m:1"] {
    width: 9.84848%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre1"] {
    margin-left: 12.87879%;
  }

  [am-Grid-Col~="m:2"] {
    width: 22.72727%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre2"] {
    margin-left: 25.75758%;
  }

  [am-Grid-Col~="m:3"] {
    width: 35.60606%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre3"] {
    margin-left: 38.63636%;
  }

  [am-Grid-Col~="m:4"] {
    width: 48.48485%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre4"] {
    margin-left: 51.51515%;
  }

  [am-Grid-Col~="m:5"] {
    width: 61.36364%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre5"] {
    margin-left: 64.39394%;
  }

  [am-Grid-Col~="m:6"] {
    width: 74.24242%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre6"] {
    margin-left: 77.27273%;
  }

  [am-Grid-Col~="m:7"] {
    width: 87.12121%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre7"] {
    margin-left: 90.15152%;
  }

  [am-Grid-Col~="m:8"] {
    width: 100%;
    float: left;
    margin-right: 3.0303%;
  }

  [am-Grid-Col~="m:pre8"] {
    margin-left: 103.0303%;
  }

  [am-Grid-Row~="m:end"] {
    margin-right: 0;
    clear: right;
  }

  [am-Grid-Row~="m:start"] {
    clear: left;
  }
}
@media (min-width: 1025px) {
  [am-Grid-Col~="l:1"] {
    width: 6.5%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre1"] {
    margin-left: 8.5%;
  }

  [am-Grid-Col~="l:2"] {
    width: 15%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre2"] {
    margin-left: 17%;
  }

  [am-Grid-Col~="l:3"] {
    width: 23.5%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre3"] {
    margin-left: 25.5%;
  }

  [am-Grid-Col~="l:4"] {
    width: 32%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre4"] {
    margin-left: 34%;
  }

  [am-Grid-Col~="l:5"] {
    width: 40.5%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre5"] {
    margin-left: 42.5%;
  }

  [am-Grid-Col~="l:6"] {
    width: 49%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre6"] {
    margin-left: 51%;
  }

  [am-Grid-Col~="l:7"] {
    width: 57.5%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre7"] {
    margin-left: 59.5%;
  }

  [am-Grid-Col~="l:8"] {
    width: 66%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre8"] {
    margin-left: 68%;
  }

  [am-Grid-Col~="l:9"] {
    width: 74.5%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre9"] {
    margin-left: 76.5%;
  }

  [am-Grid-Col~="l:10"] {
    width: 83%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre10"] {
    margin-left: 85%;
  }

  [am-Grid-Col~="l:11"] {
    width: 91.5%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre11"] {
    margin-left: 93.5%;
  }

  [am-Grid-Col~="l:12"] {
    width: 100%;
    float: left;
    margin-right: 2%;
  }

  [am-Grid-Col~="l:pre12"] {
    margin-left: 102%;
  }

  [am-Grid-Row~="l:end"] {
    margin-right: 0;
    clear: right;
  }

  [am-Grid-Row~="l:start"] {
    clear: left;
  }
}