.container {
  width: 100%;
  padding-left: $spacing-base;
  padding-right: $spacing-base;
  margin-left: auto;
  margin-right: auto;
  
  @include media-up('sm') {
    max-width: $container-sm;
  }
  
  @include media-up('md') {
    max-width: $container-md;
  }
  
  @include media-up('lg') {
    max-width: $container-lg;
  }
  
  @include media-up('xl') {
    max-width: $container-xl;
  }
  
  @include media-up('2xl') {
    max-width: $container-2xl;
  }
}

.container-fluid {
  width: 100%;
  padding-left: $spacing-base;
  padding-right: $spacing-base;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -#{$spacing-sm};
  margin-right: -#{$spacing-sm};
}

.col {
  flex: 1 0 0%;
  padding-left: $spacing-sm;
  padding-right: $spacing-sm;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    flex: 0 0 auto;
    width: percentage($i / 12);
    padding-left: $spacing-sm;
    padding-right: $spacing-sm;
  }
}

@each $breakpoint, $width in $breakpoints {
  @include media-up($breakpoint) {
    @for $i from 1 through 12 {
      .col-#{$breakpoint}-#{$i} {
        flex: 0 0 auto;
        width: percentage($i / 12);
      }
    }
    
    .col-#{$breakpoint} {
      flex: 1 0 0%;
    }
    
    .col-#{$breakpoint}-auto {
      flex: 0 0 auto;
      width: auto;
    }
  }
}