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

.vads-l-grid-container {
  @include padding(null $site-margins-mobile);

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

.vads-l-grid-container--full {
  padding: 0;
  max-width: 100%;
}

.vads-l-row {
  display: flex;
  flex-wrap: wrap;
  min-width: 100%;
}

%grid-column {
  box-sizing: border-box;
  min-height: 1px; // Prevent columns from collapsing when empty
  min-width: 0; // Resize columns as expected (https://css-tricks.com/flexbox-truncated-text/)
  position: relative;
  width: 100%;
}

@for $i from 1 through $grid-columns {
  // Example: vads-l-col--6
  .vads-l-col--#{$i} {
    @extend %grid-column;
  }
}

.vads-l-col {
  @extend %grid-column;
  @include equal-width-flexbox-col;
}

@for $i from 1 through $grid-columns {
  // Example: vads-l-col--12
  .vads-l-col--#{$i} {
    @include flexbox-col($i);
  }
}

// Breakpoint prefix grids. All
@each $bp_name, $bp_value in $breakpoints {

  @media (min-width: $bp_value) {
    // Provide breakpoint classes for equal-width columns
    // Example: vads-l-lg-col
    .#{$bp_name}\:vads-l-col {
      @include equal-width-flexbox-col;
    }

    @for $i from 1 through $grid-columns {
      // Example: vads-l-lg-col--12
      .#{$bp_name}\:vads-l-col--#{$i} {
        @include flexbox-col($i);
      }
    }
  }
}