div {
  box-sizing: border-box;
}

.ds-hide {
  display: none;
}

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

.row {
  display: flex;
  flex-wrap: wrap;
  width: $ds-site-width;
  max-width: 100%;
  margin: $ds-grid-gap * -1 auto 0 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: $ds-site-width;
  }

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

  &.collapsed {
    margin-top: 0;
  }

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

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

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

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

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

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

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