.container,
.container-fluid {
  width: 100%;
  max-width: $container-max-width;
  margin: 0 auto;
  padding: 0 1rem;

  @include media-breakpoint-up(lg) {
    padding: 0 2rem;
  }
}

.container-narrow {
  max-width: $container-narrow-max-width;
}

.container-slim {
  max-width: $container-slim-max-width;
}

.container-fluid {
  max-width: 100%;
}

.row {
  @include make-row();

  > * {
    @include make-col-ready();
  }
}

@include make-grid-columns();

.col-separator {
  border-top: 1px solid $color-border-light;
  border-right: 1px solid $color-border-light;
  flex: 0 0 0%;
  padding: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: $gap-3;
}

@each $name, $size in map-merge((null: $gap-3), $gaps) {
  $suffix: if($name == null, null, '-#{$name}');

  .stack#{$suffix} {
    gap: $size;
  }

  .space-y#{$suffix} {
    > * ~ * {
      margin-top: $size !important;
    }
  }

  .space-x#{$suffix} {
    > * ~ * {
      margin-left: $size !important;
    }
  }

  .divider-y#{$suffix} {
    > * {
      &:not(:first-child) {
        padding-top: divide($size, 2) !important;
        border-top: 1px solid $color-border-light;
      }

      &:not(:last-child) {
        padding-bottom: divide($size, 2) !important;
      }
    }
  }
}