@layer layout {
  :root {
    /* Grid settings */
    --grid-gap: 32px;
  }

  .layout-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--grid-gap);
    width: 100%;
  }

  /* Medium: 768px+ - 8 columns */
  @media (min-width: 768px) {
    .layout-grid {
      grid-template-columns: repeat(8, 1fr);
    }
  }

  /* Large: 1280px+ - 12 columns */
  @media (min-width: 1280px) {
    .layout-grid {
      grid-template-columns: repeat(12, 1fr);
    }
  }

  /* Default: all 4 columns on mobile */
  .layout-grid > .col,
  .layout-grid > .col-offset {
    grid-column: span 4;
  }

  .layout-grid > .col-half {
    grid-column: span 4;
  }

  .layout-grid > .col-full {
    grid-column: span 4;
  }

  /* Medium: 768px+ (8 columns) */
  @media (min-width: 768px) {
    .layout-grid > .col {
      grid-column: 1 / span 8;
    }

    .layout-grid > .col-offset {
      grid-column: 1 / span 8;
    }

    .layout-grid > .col-half {
      grid-column: span 4;
    }

    .layout-grid > .col-full {
      grid-column: span 8;
    }
  }

  /* Large: 1280px+ (12 columns) */
  @media (min-width: 1280px) {
    .layout-grid > .col {
      grid-column: 3 / span 8;
    }

    .layout-grid > .col-offset {
      grid-column: 3 / span 10;
    }

    .layout-grid > .col-half {
      grid-column: span 6;
    }

    .layout-grid > .col-full {
      grid-column: span 12;
    }
  }

  /* override nested layout-grid to allow account for inherit text-col */
  .layout-grid > .col,
  .layout-grid > .col-offset {
    .layout-grid {
      display: block !important;
    }
  }
}