div {
  box-sizing: border-box;
}

@function round-width ($i) {
  $width : floor(100 * $i * 100 / $grid-size) / 100;
  @return $width#{"%"};
}

.row {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: $site-width;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;

  &.fluid, .row {
    width: 100%;
  }

  &.limited {
    // when there is a child row set to 100%
    // use this to force a width defined by the site
    max-width: $site-width;
  }

  &.full-height {
    height: 100vh;
  }

  &.collapsed {
    margin-top: 0;
  }

  & > div {
    padding: 0 $grid-gap/2 0 $grid-gap/2;

    background-clip: content-box;
    flex-basis: 100%;
  }

  // centralize it's children
  &.centralized {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }

  .columns {
    padding-right: .625rem;
    padding-left: .625rem;
  }

  &.reversed, &.medium-reversed {
    flex-direction: column-reverse;
  }
}

@for $i from 0 through $grid-size {
  .row > .small-#{$i} {
    flex-basis: round-width($i);
    -webkit-flex-basis: round-width($i);
    max-width: round-width($i);
  }
  .row > .small-offset-#{$i} {
    margin-left: round-width($i);
  }
}

@media #{$tablet-media-query}, #{$computer-media-query} {
  @for $i from 0 through $grid-size {
    .row > .medium-#{$i} {
      flex-basis: round-width($i);
      max-width: round-width($i);
    }
    .row > .medium-offset-#{$i} {
      margin-left: round-width($i);
    }
  }
}

@media #{$computer-media-query} {
  @for $i from 0 through $grid-size {
    .row > .large-#{$i} {
      flex-basis: round-width($i);
      max-width: round-width($i);
    }
    .row > .large-offset-#{$i} {
      margin-left: round-width($i);
    }
    .row {
      .columns {
        padding-right: .9375rem;
        padding-left: .9375rem;
      }

      &.medium-reversed {
        flex-direction: row;
      }

      &.large-reversed {
        flex-direction: column-reverse;
      }
    }
  }
}