.wds-container {
  --wds-container-padding-inline: 16px;
  --wds-container-width-fluid: 100%;
  --wds-container-width-standard: 1160px;
  --wds-container-width-narrow: 840px;
  --wds-container-width-compact: 600px;

  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wds-container-padding-inline);

  @media (--screen-sm) {
    --wds-container-padding-inline: var(--size-16);
  }

  @media (--screen-md) {
    --wds-container-padding-inline: var(--size-32);
  }

  @media (--screen-lg) {
    --wds-container-padding-inline: var(--size-40);
  }

  &--standard {
    max-width: var(--wds-container-width-standard);
  }

  &--narrow {
    max-width: var(--wds-container-width-narrow);
  }

  &--compact {
    max-width: var(--wds-container-width-compact);
  }

  &--fluid {
    max-width: var(--wds-container-width-fluid);
  }
}
