.ls {
  padding-inline: var(--ls-outer-padding-inline, 1.25rem);
}

.ls__inner {
  margin-inline: auto;
  max-width: var(--ls-inner-max-width, 64rem);
}

.ls--bleed {
  padding-inline: 0;
}

.ls--govuk > .ls__inner > * {
  max-width: var(--ls-inner-govuk-max-width, 40rem);
}

.ls--separated + .ls,
.ls + .ls--separated {
  margin-block-start: var(--ls-outer-margin-block, 1.25rem);
}

.ls--uncontained > .ls__inner {
  max-width: none;
}

.ls--wrapped > .ls__inner {
  padding-block: var(--ls-inner-padding-block, 1.25rem);
  padding-inline: var(--ls-inner-padding-inline, 1.25rem);
}

/**
 * Sometimes we have a full-width coloured background, and we want the content
 * to be spaced from the top and bottom, but also occupy the full content width.
 *
 * .ls--wrapped + .ls--bleed won't do that exact thing, so we need one more
 * class.
 */
.ls--wrapped-block > .ls__inner {
  padding-block: var(--ls-inner-padding-block, 1.25rem);
}

/**
 * Not sure where this will be useful. Provided for completeness.
 */
.ls--wrapped-inline > .ls__inner {
  padding-inline: var(--ls-inner-padding-inline, 1.25rem);
}

.ls--debug {
  outline: 1px dotted darkolivegreen;
}

.ls--debug > .ls__inner {
  outline: 1px dotted cornflowerblue;
}

.ls--debug > .ls__inner > * {
  outline: 1px dotted chocolate;
}

@media screen and (min-width: 48rem) {
  .ls:not(.ls--bleed) {
    padding-inline: var(--ls-outer-padding-inline, 2rem);
  }

  .ls--separated + .ls,
  .ls + .ls--separated {
    margin-block-start: var(--ls-outer-margin-block, 2rem);
  }

  .ls--wrapped > .ls__inner {
    padding-block: var(--ls-inner-padding-block, 2rem);
    padding-inline: var(--ls-inner-padding-inline, 2rem);
  }

  .ls--wrapped-block > .ls__inner {
    padding-block: var(--ls-inner-padding-block, 2rem);
  }

  .ls--wrapped-inline > .ls__inner {
    padding-inline: var(--ls-inner-padding-inline, 2rem);
  }
}

/* Design system shows this, but the designs don't acutally DO it. */
/*
@media screen and (min-width: 71.5rem) {
  .ls--wrapped .ls__inner {
    padding-block: var(--ls-inner-padding-block, 3.75rem);
    padding-inline: var(--ls-inner-padding-inline, 3.75rem);
  }
}
*/