// Grid
///
[class*="col-"]
  display: inline
  float: left
  padding-left: padding-width
  padding-right: padding-width

// Extra small 320
for i in (1)..(total-columns)
  .col-xs-{i}
    width: x-gridsystem-width(i)
for i in (1)..(total-columns)
  .col-xs-offset-{i}
    margin-left: x-gridsystem-width(i)

// Small 768
@media (min-width: screen-tablet-portrait)
  for i in (1)..(total-columns)
    .col-sm-{i}
      width: x-gridsystem-width(i)
  for i in (1)..(total-columns)
    .col-sm-offset-{i}
      margin-left: x-gridsystem-width(i)

// Medium 992
@media (min-width: screen-desktop)
  for i in (1)..(total-columns)
    .col-md-{i}
      width: x-gridsystem-width(i)
  for i in (1)..(total-columns)
    .col-md-offset-{i}
      margin-left: x-gridsystem-width(i)

// Large 1300
@media (min-width: screen-wide)
  for i in (1)..(total-columns)
    .col-lg-{i}
      width: x-gridsystem-width(i)
  for i in (1)..(total-columns)
    .col-lg-offset-{i}
      margin-left: x-gridsystem-width(i)