/* ── Content grid width system (1500px max) ── */
.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 1400px;
  --breakout-max-width: 85ch;
  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
  width: 100%;
  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) {
  grid-column: content;
  width: 100%;
  padding-inline: 0;
}

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

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