/* Backgrounds span the viewport; content keeps its original capped width and gutters. */
body[data-background-layout] { container-type: inline-size; }
body[data-background-layout] .mt-desktop { --background-outset: max(0px, calc((100cqw - 1440px) / 2)); }
body[data-background-layout] .mt-tablet { --background-outset: max(0px, calc((100cqw - 820px) / 2)); }
body[data-background-layout] .mt-mobile { --background-outset: max(0px, calc((100cqw - 390px) / 2)); }
body[data-background-layout] [data-background-bleed] {
  width: calc(100% + var(--background-outset) + var(--background-outset)) !important;
  margin-left: calc(-1 * var(--background-outset)) !important;
  margin-right: calc(-1 * var(--background-outset)) !important;
  padding-left: calc(var(--background-pad-left, 0px) + var(--background-outset)) !important;
  padding-right: calc(var(--background-pad-right, 0px) + var(--background-outset)) !important;
}