.grid-with-breakout {
  display: grid;
  grid-template-columns:
    minmax(0, var(--start-width, var(--side-width, 0.25fr)))
    minmax(0, var(--content-width, 1fr))
    minmax(0, var(--end-width, var(--side-width, 0.25fr)));
  gap: var(--gap-y, var(--gap)) var(--gap-x, var(--gap));
  max-width: 100%;

  > * {
    grid-column: 2 / -2;
    max-width: 100%;
  }

  > .breakout-small {
    grid-column: auto / span 1;
  }

  > .breakout-start-only,
  > .breakout-left-only {
    grid-column: 1 / 2;
  }

  > .breakout-start,
  > .breakout-left {
    grid-column: 1 / -2;
  }

  > .breakout-end,
  > .breakout-right {
    grid-column: 2 / -1;
  }

  > .breakout-end-only,
  > .breakout-right-only {
    grid-column: -1 / -2;
  }

  > .breakout-full {
    grid-column: 1 / -1;
  }
}