.content_grid {
  --padding-inline: 1rem;
  --content-max-width: 980px;
  --breakout-max-width: 1200px;

  --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;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}