.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

.row {
  margin: 0 -5px;
  > div {
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px; 
    float: left;
    img {
      max-width: 100%;
    }
  }
  &.no-gutter {
    margin: 0 !important;
    > div {
      padding: 0px !important;
    }
  }

  &.cols-12 > div { width: percentage(1 / 12); }
  &.cols-11 > div { width: percentage(1 / 11); }
  &.cols-10 > div { width: percentage(1 / 10); }
  &.cols-9  > div { width: percentage(1 / 9); }
  &.cols-8  > div { width: percentage(1 / 8); }
  &.cols-7  > div { width: percentage(1 / 7); }
  &.cols-6  > div { width: percentage(1 / 6); }
  &.cols-5  > div { width: percentage(1 / 5); }
  &.cols-4  > div { width: percentage(1 / 4); }
  &.cols-3  > div { width: percentage(1 / 3); }
  &.cols-2  > div { width: percentage(1 / 2); }
  &.cols-1  > div { width: percentage(1 / 1); }
}