grid-system.css

@layer base {
  .article-grid {
    @apply grid content-start grid-cols-article-sm md:grid-cols-article-md lg:grid-cols-article-lg xl:grid-cols-article-xl 2xl:grid-cols-article-2xl;
  }
  .article-left-grid {
    @apply grid content-start grid-cols-article-sm md:grid-cols-article-left-md lg:grid-cols-article-left-lg xl:grid-cols-article-left-xl 2xl:grid-cols-article-left-2xl;
  }
  .article-center-grid {
    @apply grid content-start grid-cols-article-center-sm md:grid-cols-article-center-md lg:grid-cols-article-center-lg xl:grid-cols-article-center-xl 2xl:grid-cols-article-center-2xl;
  }

  .article-grid > *,
  .article-left-grid > *,
  .article-center-grid > * {
    /* The default is spanning the body for any child component */
    @apply col-body;
    /* Grids do not have margin-collapse, so each direct child needs to be addressed */
    margin-top: 0 !important;
  }
  .grid-gap {
    @apply gap-1 md:gap-2 xl:gap-3 2xl:gap-4;
  }
  .subgrid-gap {
    @apply gap-x-1 md:gap-x-2 xl:gap-x-3 2xl:gap-x-4;
  }
  /* These columns need more responsive design */
  .col-margin-left {
    @apply col-body xl:col-margin-left-lg;
  }
  .col-margin-right,
  .col-margin {
    @apply col-body lg:col-margin-right-lg;
  }
  .col-margin-right-inset {
    @apply col-body lg:col-margin-right-inset-lg;
  }
  .col-gutter-page-right {
    @apply col-gutter-page-right-sm md:col-gutter-page-right-md lg:col-gutter-page-right-lg;
  }
  .col-gutter-page-left {
    @apply col-gutter-page-left-sm md:col-gutter-page-left-md lg:col-gutter-page-left-lg;
  }
  .col-body-inset-right {
    @apply col-body-inset-right-sm lg:col-body-inset-right-lg;
  }
  .col-body-inset-left {
    @apply col-body-inset-left-sm lg:col-body-inset-left-lg;
  }
  .col-page-middle {
    @apply col-page-middle-sm lg:col-page-middle-lg;
  }
  .error-content {
    @apply pt-[80px] prose prose-stone dark:prose-invert break-words mx-5 p-3 max-w-none sm:pl-10 md:max-w-2xl lg:mx-auto xl:max-w-4xl;
  }
}