@layer page {
  article {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'content';
    row-gap: var(--rh-space-4xl);

    &.has-toc {
      grid-template-areas:
        'header'
        'aside'
        'content';
    }

    & .aside {
      grid-area: aside;
      padding-inline: var(--rh-space-lg);

      @container main (width >= 1440px) {
        padding-inline: 0 var(--rh-space-2xl);
      }
    }

    & .container {
      grid-area: content;
      container-type: inline-size;
      container-name: container;

      & > section {
        margin-block-start: var(--rh-space-6xl);
      }

      & > section:first-of-type {
        margin-block-start: 0;
      }

      & h2,
      uxdot-copy-permalink h2 {
        font-size: var(--rh-font-size-heading-md);  /* RHDS h4 heading font size */
      }

      & h3,
      uxdot-copy-permalink h3 {
        font-size: var(--rh-font-size-heading-sm);  /* RHDS h5 heading font size */
      }

      & h4,
      uxdot-copy-permalink h4 {
        font-size: var(--rh-font-size-heading-xs);  /* RHDS h6 heading font size */
      }

      & h5,
      uxdot-copy-permalink h5 {
        font-size: 1.125rem;  /* Not a RHDS token */
      }

      & h6,
      uxdot-copy-permalink h6 {
        font-size: 1rem;  /* Not a RHDS token */
      }

      /**
       * when in a article container
       * where a h2 or uxdot-copy-permalink is used
       * as a section break (no landmark)
       */
      & > :where(uxdot-copy-permalink.h2, h2),
      & > :not(section, uxdot-copy-permalink) > :where(uxdot-copy-permalink.h2, h2),
      & > section > :where(uxdot-copy-permalink.h2, h2) {
        margin-block-start: var(--rh-space-6xl);
      }

      /**
       * TODO: get rid of inline style/link/script tags inside of container
       * if a section, h2 or uxdot-copy-permalink is the first child of an article container
       */
      & :where(uxdot-copy-permalink.h2, h2, section):first-child,
      & :where(style, link, script):first-child + :where(uxdot-copy-permalink.h2, h2, section),
      & :where(style, link, script):first-child + :where(
          style, link) + :where(uxdot-copy-permalink.h2, h2, section),
      & :where(style, link, script):first-child + :where(
            style, link, script) + :where(style, link, script) + :where(
              uxdot-copy-permalink.h2, h2, section) {
        margin-block-start: 0;
      }

      /**
       * when in a article container
       * where a h3 or uxdot-copy-permalink is used
       * as a section break (no landmark)
       */
      & > :where(uxdot-copy-permalink.h3, h3),
      & > :not(section, uxdot-copy-permalink) > :where(uxdot-copy-permalink.h3, h3),
      & > section > :where(uxdot-copy-permalink.h3, h3) {
        margin-block-start: var(--rh-space-4xl);
      }

      /**
       * when in a article container
       * where a h4 or uxdot-copy-permalink is used
       * as a section break (no landmark)
       */
      & > :where(uxdot-copy-permalink.h4, h4),
      & > :not(section, uxdot-copy-permalink) > :where(uxdot-copy-permalink.h4, h4),
      & > section > :where(uxdot-copy-permalink.h4, h4) {
        margin-block-start: var(--rh-space-3xl);
      }
    }
  }

  uxdot-header {
    grid-area: header;
  }

  :where(article .container rh-code-block) {
    max-width: 56rem; /* warning: magic number */
  }

  uxdot-toc {
    @container main (width < 576px) {
      margin-inline: var(--rh-space-lg);
    }

    @container main (width >= 576px) {
      padding-inline: var(--rh-space-2xl);
    }

    @container main (width >= 768px) {
      padding-inline: var(--rh-space-3xl);
    }

    @container main (width >= 992px) {
      padding-inline: var(--rh-space-6xl);
    }

    @container main (width >= 1440px) {
      padding-inline: 0;
    }
  }

  @container main (width >= 992px) {
    article {
      row-gap: var(--rh-space-6xl);
    }
  }

  /* this follows the @media queries so that it can override the aside */
  @container main (width >= 1440px) {
    article {
      grid-template-columns:
        minmax(var(--container-min-width),
          var(--container-max-width))
        minmax(14rem, 1fr);
      grid-template-areas:
        'header header'
        'content content';

      &.has-toc {
        grid-template-areas:
          'header header'
          'content aside';

        & uxdot-toc {
          max-width: 320px;
          position: sticky;
          height: max-content;
          top: calc(var(--uxdot-masthead-max-height) + var(--rh-space-2xl) * 3);
        }
      }
    }
  }
}