* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: $container-width;
  margin: 0 auto;
  padding-right: $column-gutter;
  padding-left: $column-gutter;
}

.container-fluid {
  width: 100%;
  padding-right: $column-gutter;
  padding-left: $column-gutter;
}

.container--safe {
  padding-right: max(#{$column-gutter}, env(safe-area-inset-right));
  padding-left: max(#{$column-gutter}, env(safe-area-inset-left));
}

.row {
  display: flex;
  flex-wrap: wrap;

  &:not(&--no-gutters):not(&--compact) {
    margin-right: calc(#{$column-gutter} * -1);
    margin-left: calc(#{$column-gutter} * -1);

    & > .col,
    & > [class^='col-'] {
      padding-right: $column-gutter;
      padding-left: $column-gutter;
    }
  }

  &--compact {
    margin-right: calc(#{$compact-column-gutter} * -1);
    margin-left: calc(#{$compact-column-gutter} * -1);

    & > .col,
    & > [class^='col-'] {
      padding-right: $compact-column-gutter;
      padding-left: $compact-column-gutter;
    }
  }
}


@include generate-columns($breakpoints, $grid-columns);

.col-fit-content {
  flex-basis: 0;
  flex-grow: 0;
  max-width: 100%;
}