.layout,
.header-wrapper,
.footer-wrapper {
  --_padding-inline: var(--layout-inline-padding);
  --_content-max-width: var(--layout-content-max-width);
  --_breakout-max-width: var(--layout-breakout-max-width);
  --_breakout-size: calc(
    (var(--_breakout-max-width) - var(--_content-max-width)) / 2
  );
  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--_padding-inline), 1fr)
    [breakout-start] minmax(0, var(--_breakout-size))
    [content-start] min(
      100% - (var(--_padding-inline) * 2),
      var(--_content-max-width)
    )
    [content-end]
    minmax(0, var(--_breakout-size)) [breakout-end]
    minmax(var(--_padding-inline), 1fr) [full-width-end];
}

:where(.layout > :not([layout]),
.header-wrapper > :not([layout]),
.footer-wrapper > :not([layout]),
[layout="full-width"] > :not([layout])) {
  grid-column: content;
}

.layout > [layout="full-width"],
.header-wrapper > [layout="full-width"],
.footer-wrapper > [layout="full-width"], 
[layout="full-width"] > [layout="full-width"] {
  grid-column: full-width-start / full-width-end;
  display: grid;
  grid-template-columns: inherit;
}

.layout > [layout="breakout"],
.header-wrapper > [layout="breakout"],
.footer-wrapper > [layout="breakout"],
[layout="full-width"] > [layout="breakout"] {
  grid-column: breakout;
}

.layout > * + * {
  margin-block-start: var(--layout-block-spacing);
}