.container-grid2 {
    // setup
    --grid-column-count: 12;
    --grid-gap-column: 0px; // always need 'px' at end.
    --grid-gap-row: 0px; // always need 'px' at end.
    --grid-max-width-main: 100rem; // 1248px
    --grid-padding-x: 1rem;
  
    // build grid
    --grid-column-gap-reserve: calc( (var(--grid-column-count) - 1) * var(--grid-gap-column));
    --grid-max-width-column: calc((var(--grid-max-width-main) - var(--grid-column-gap-reserve)) / var(--grid-column-count));
  
    --grid-main:
      repeat(calc(var(--grid-column-count) / 2), minmax(0, var(--grid-max-width-column)))
      [center]
      repeat(calc(var(--grid-column-count) / 2), minmax(0, var(--grid-max-width-column)));
  
    // helpers
    --grid-main-span: main-start / main-end;
    --grid-wide-span: wide-start / wide-end;
  
    --grid-column-wide-width: var(--grid-padding-x);
    --grid-column-width: calc( ( 100vw - (var(--grid-gap-column) * (var(--grid-column-count) + 1)) ) / var(--grid-column-count) );
  
    @include breakpoint(xl) {
      --grid-column-wide-width: calc( ( 100vw - var(--grid-max-width-main) ) / 2 );
      --grid-column-width: calc( ( ( 100vw - ( var(--grid-column-wide-width) * 2 ) ) - (var(--grid-gap-column) * (var(--grid-column-count) + 1)) ) / var(--grid-column-count) );
    }
  
    display: grid;
    gap: var(--grid-gap-row) var(--grid-gap-column);
    grid-template-columns:
      [wide-start]
      minmax(var(--grid-padding-x, 0px), 1fr)
      [main-start]
      var(--grid-main-override, var(--grid-main))
      [main-end]
      minmax(var(--grid-padding-x, 0px), 1fr)
      [wide-end];
    position: relative;
  }