Max width with fr in grid.

// Grid
.content,
.full,
.breakout {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(0, 1fr);
  // --full: calc((100vw - #{$max-width}) / 4);
  --breakout: minmax(calc((100vw - #{$max-width}) / 4), #{$max-br-width});
  // --breakout: clamp(0, 1fr, $max-br-width);
  --content: clamp(
    5ch,
    45vw,
    min(#{$max-width} / 2, 65ch)
  ); //clamp(25ch, 45vw, 65ch)

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [breakout-start] var(--breakout)
    [content-start left-start] var(--content)
    [split left-end right-start] var(--content)
    [content-end right-end] var(--breakout)
    [breakout-end]var(--full)
    [full-end];

  @include media("<=medium") {
    --breakout: 0;
  }
}

.content > *,
.full > * {
  grid-column: content;
  margin: 0; //TODO: Revisit
}

.breakout > * {
  grid-column: breakout;
}
.breakout {
  grid-column: full;
}
.full {
  grid-column: full;
}

.left {
  grid-column: left;
  @include media("<=medium") {
    grid-column: content;
  }
}
.right {
  grid-column: right;
  @include media("<=medium") {
    grid-column: content;
  }
}

.split {
  grid-column: split;
}

// Grid
.content,
.full,
.breakout {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(0, 1fr);
  // --full: calc((100vw - #{$max-width}) / 4);
  --breakout: minmax(calc((100vw - #{$max-width}) / 4), #{$max-br-width});
  // --breakout: clamp(0, 1fr, $max-br-width);
  --content: clamp(
    5ch,
    45vw,
    min(#{$max-width} / 2, 65ch)
  ); //clamp(25ch, 45vw, 65ch)

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [breakout-start] var(--breakout)
    [content-start left-start] var(--content)
    [split left-end right-start] var(--content)
    [content-end right-end] var(--breakout)
    [breakout-end]var(--full)
    [full-end];

  @include media("<=medium") {
    --breakout: 0;
  }
}

.content > *,
.full > * {
  grid-column: content;
  margin: 0; //TODO: Revisit
}

.breakout > * {
  grid-column: breakout;
}
.breakout {
  grid-column: full;
}
.full {
  grid-column: full;
}

.left {
  grid-column: left;
  @include media("<=medium") {
    grid-column: content;
  }
}
.right {
  grid-column: right;
  @include media("<=medium") {
    grid-column: content;
  }
}

.split {
  grid-column: split;
}