.row {
  max-width: $grid-width;
  margin: 0 auto;

  &:not(:last-child) {
    margin-bottom: $gutter-vertical;

    @include respond(tab-port) {
      margin-bottom: $gutter-vertical-small;
    }
  }
  @include respond(tab-port) {
    max-width: 50rem;
    padding: 0 3rem;
  }

  @include clearfix;

  [class^="col-"] {
    float: left;

    &:not(:last-child) {
      margin-right: $gutter_horizontal;

      @include respond(tab-port) {
        margin-right: 0;
        margin-bottom: $gutter-vertical-small;
      }
    }

    @include respond(tab-port) {
      width: 100% !important;
    }
  }
  .col-1-of-2 {
    width: calc((100% - #{$gutter_horizontal}) / 2);
  }

  .col-1-of-3 {
    width: calc((100% - 2 * #{$gutter_horizontal}) / 3);
  }
  .col-2-of-3 {
    width: calc(
      2 * ((100% - 2 * #{$gutter_horizontal}) / 3) + #{$gutter_horizontal}
    );
  }
  .col-1-of-4 {
    width: calc((100% - 3 * #{$gutter_horizontal}) / 4);
  }
  .col-2-of-4 {
    width: calc(
      2 * ((100% - 3 * #{$gutter_horizontal}) / 4) + #{$gutter_horizontal}
    );
  }
  .col-3-of-4 {
    width: calc(
      3 * ((100% - 3 * #{$gutter_horizontal}) / 4) + 2 * #{$gutter_horizontal}
    );
  }
}
