/* The libary code CSS for the grid is */
.content-grid {
  /* private variables, with defaults */
  --_breakout-max-width: var(--breakout-max-width, 6ch);
  --_content-max-width: var(--content-max-width, 60ch);
  --_padding-inline: var(--content-padding-inline, 6ch);
    
  --_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];
}

.content-grid > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width {
  grid-column: full-width;

  display: grid;
  grid-template-columns: inherit;
}

/* Settings for this site are */
:root {
  --breakout-max-width: 4rem;
  --content-max-width: 52ch;
  --content-padding-inline: 2rem;
}