@use 'sprucecss/scss/spruce' as *;

.container {
  --inline-size: #{config('container-inline-size', $layout, false)};
  --gap: #{spacer-clamp('m', 'l')};

  @include layout-center(
    var(--gap),
    var(--inline-size)
  );

  &--wide {
    --inline-size: 100%;
  }

  &--narrow {
    --inline-size: 50rem;
  }
}

<div class="container">
    <div class="bit">.container</div>
</div>
<div class="container container--wide">
    <div class="bit">.container--wide</div>
</div>
<div class="container container--narrow">
    <div class="bit">.container--narrow</div>
</div>