// Grid container
.usa-grid,
.usa-grid-full {
  @include outer-container($site-max-width);
}

.usa-grid {
  @include padding(null $site-margins-mobile);

  @include media($medium-screen) {
    @include padding(null $site-margins);
  }
}

.usa-grid-full {
  padding: 0;
}

// Grid items
@include media($medium) {
  .usa-width-one-whole {
    @include span-columns(6);
  }

  .usa-width-one-half {
    @include span-columns(3);
  }

  .usa-width-one-third {
    @include span-columns(2);
  }

  .usa-width-two-thirds {
    @include span-columns(4);
  }

  .usa-width-one-fourth {
    @include span-columns(3);

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .usa-width-three-fourths {
    @include span-columns(6);
  }

  .usa-width-one-sixth {
    @include span-columns(2);

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .usa-width-five-sixths {
    @include span-columns(4);
  }

  .usa-width-one-twelfth {
    @include span-columns(2);

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .usa-width-five-twelfths {
    @include span-columns(2);
  }

  .usa-width-seven-twelfths {
    @include span-columns(4);
  }
}

@include media($large) {
  .usa-width-one-whole {
    @include span-columns(12);
  }

  .usa-width-one-half {
    @include span-columns(6);
  }

  .usa-width-one-third {
    @include span-columns(4);
  }

  .usa-width-two-thirds {
    @include span-columns(8);
  }

  .usa-width-one-fourth {
    @include span-columns(3);

    &:nth-child(2n) {
      @include span-columns(3);
    }

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .usa-width-three-fourths {
    @include span-columns(9);
  }

  .usa-width-one-sixth {
    @include span-columns(2);

    &:nth-child(3n) {
      @include span-columns(2);
    }

    &:nth-child(6n) {
      margin-right: 0;
    }
  }

  .usa-width-five-sixths {
    @include span-columns(10);
  }

  .usa-width-one-twelfth {
    @include span-columns(1);

    &:nth-child(3n) {
      @include span-columns(1);
    }

    &:nth-child(12n) {
      margin-right: 0;
    }
  }

  .usa-width-five-twelfths {
    @include span-columns(5);
  }

  .usa-width-seven-twelfths {
    @include span-columns(7);
  }
}

// Specifies end of a row.
// Required if grid-box contains multiple rows.
// Required if browser does not support :last-child
.usa-end-row {
  @include omega();
}

// Grid Offsets
.usa-offset-one-twelfth {
  @include shift(1 of 12);
}

.usa-offset-one-sixth {
  @include shift(2 of 12);
}

.usa-offset-one-fourth {
  @include shift(3 of 12);
}

.usa-offset-one-third {
  @include shift(4 of 12);
}

.usa-offset-five-twelfths {
  @include shift(5 of 12);
}

.usa-offset-one-half {
  @include shift(6 of 12);
}

.usa-offset-seven-twelfths {
  @include shift(7 of 12);
}

.usa-offset-two-thirds {
  @include shift(8 of 12);
}

.usa-offset-three-fourths {
  @include shift(9 of 12);
}

.usa-offset-five-sixths {
  @include shift(10 of 12);
}

.usa-offset-eleven-twelfths {
  @include shift(11 of 12);
}