$mediaQuerySteps: (
  'md': var(--rws-md-width, 1200px),
  'sm': var(--rws-sm-width, 992px),
  'xs': var(--rws-xs-width, 768px)
);

// Mixin for the grid container
@mixin grid-container() {
  display: flex;
  flex-wrap: wrap;
}

@mixin grid-container-gap($gap) {
  gap: $gap;
  margin-right: -#{$gap}; 
  margin-left: -#{$gap}; 
}

// Mixin for grid columns

@mixin internal-grid-column($columns: 12) {
  flex: 0 0 calc(100% / 12 * $columns);
  max-width: calc(100% / 12 * $columns);
}

@mixin grid-column($columns: 12) {
  @include internal-grid-column($columns);
}

@mixin grid-column($columns: 12, $mdColumns: 12) {
  @include internal-grid-column($columns);

  @media screen and (max-width: map.get($mediaQuerySteps, 'md')) {
    @include internal-grid-column($mdColumns);
  }
}

@mixin grid-column($columns: 12, $mdColumns: 12, $smColumns: 12) {
  @include internal-grid-column($columns);

  @media screen and (max-width: map.get($mediaQuerySteps, 'md')) {
    @include internal-grid-column($mdColumns);
  }

  @media screen and (max-width: map.get($mediaQuerySteps, 'sm')) {
    @include internal-grid-column($smColumns);
  }
}

@mixin grid-column($columns: 12, $mdColumns: 12, $smColumns: 12, $xsColumns: 12) {
  @include internal-grid-column($columns);

  @media screen and (max-width: map.get($mediaQuerySteps, 'md')) {
    @include internal-grid-column($mdColumns);
  }

  @media screen and (max-width: map.get($mediaQuerySteps, 'sm')) {
    @include internal-grid-column($smColumns);
  }

  @media screen and (max-width: map.get($mediaQuerySteps, 'xs')) {
    @include internal-grid-column($xsColumns);
  }
}

// Mixins for grid alignment

@mixin grid-flex-align-items($horizontal, $vertical: top) {
  justify-content: $horizontal;
  align-items: $vertical;
}

@mixin center-container() {
  margin-left: auto;
  margin-right: auto;
}