[class*=l-container] {
  --container-gutter: var(--prototype-space-36);
  --container-width: var(--prototype-width-xlarge);
  padding-inline: var(--container-gutter);
  margin-inline: auto;
  max-width: var(--container-width);
  width: 100%;
}

.l-container--gutter-none {
  --container-gutter: 0;
}

.l-container--gutter-large {
  --container-gutter: var(--prototype-space-20);
}

.l-container--gutter-medium {
  --container-gutter: var(--prototype-space-36);
}

.l-container--gutter-small {
  --container-gutter: var(--prototype-space-60);
}

.l-container--width-xxlarge {
  --container-width: var(--prototype-width-xxlarge);
}

.l-container--width-xlarge {
  --container-width: var(--prototype-width-xlarge);
}

.l-container--width-large {
  --container-width: var(--prototype-width-large);
}

.l-container--width-medium {
  --container-width: var(--prototype-width-medium);
}

.l-container--width-small {
  --container-width: var(--prototype-width-small);
}

.l-container--width-xsmall {
  --container-width: var(--prototype-width-xsmall);
}

.l-container--width-xxsmall {
  --container-width: var(--prototype-width-xxsmall);
}

.l-container--bleed {
  margin-inline: calc(-1 * var(--container-gutter));
}