// --- Bootstrap 5-like settings ---
$grid-breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  3x: 1600px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px,
  3x: 1420px
) !default;

// Horizontal gutter (same as Bootstrap's default .75rem each side)
$gutter-x: 2.5rem !default;

// --- Mixin to apply container rules ---
@mixin bs5-container($selectors...) {
  @each $selector in $selectors {
    #{$selector} {
      width: 100%;
      padding-right: calc(#{$gutter-x} * .5);
      padding-left:  calc(#{$gutter-x} * .5);
      margin-right: auto;
      margin-left:  auto;
    }

    // Max-widths at breakpoints
    @each $bp, $bp-width in $grid-breakpoints {
      @media (min-width: $bp-width) {
        #{$selector} {
          max-width: map-get($container-max-widths, $bp);
        }
      }
    }
  }
}

// --- Apply to Astra + Bootstrap-like container ---
@include bs5-container('.ast-container', '.container');

// Optional: a fluid variant like Bootstrap's .container-fluid
.ast-container-fluid,
.container-fluid {
  width: 100%;
  padding-right: calc(#{$gutter-x} * .5);
  padding-left:  calc(#{$gutter-x} * .5);
  margin-right: auto;
  margin-left:  auto;
  max-width: none;
}

/* (Optional) ensure predictable sizing */
.ast-container,
.container,
.ast-container-fluid,
.container-fluid {
  box-sizing: border-box;
}