[data-fui-comp="ui-container"] {
  display: block;
  inline-size: 100%;
  max-inline-size: var(--ui-container-default, 1080px);
  margin-inline: auto;
  padding-inline: var(--spacing-md, 16px);
  box-sizing: border-box;
}
@media (min-width: 720px) {
  [data-fui-comp="ui-container"] {
    padding-inline: var(--spacing-lg, 24px);
  }
}
@media (min-width: 1080px) {
  [data-fui-comp="ui-container"] {
    padding-inline: var(--spacing-xl, 32px);
  }
}

[data-fui-comp="ui-container"].ui-container--narrow { max-inline-size: var(--ui-container-narrow, 640px); }
[data-fui-comp="ui-container"].ui-container--wide   { max-inline-size: var(--ui-container-wide, 1280px); }
[data-fui-comp="ui-container"].ui-container--full   { max-inline-size: none; }