#blog-body {
  container: blog-body / inline-size;

  inner-wrapper {
    table-of-content {
      padding-block-start: var(--fs-times-2);

      position: sticky;
      top: 0;
      align-self: start;

      summary,
      a {
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-500);
        letter-spacing: var(--ls-body-small);
        line-height: var(--lh-1p5);
      }

      summary,
      a {
        padding-block-end: var(--fs-one-third);
      }

      a {
        padding-block-start: var(--fs-one-third);

        &:nth-child(2) {
          padding-block-start: var(--font-size);
        }
      }
    }

    blog-body-main {
      h2 {
        padding-block: var(--fs-times-2);

        font-size: var(--font-size);
        font-weight: var(--font-weight-700);
        letter-spacing: var(--ls-body);
        line-height: var(--lh-1p5);
      }

      p {
        padding-block-end: var(--fs);
      }

      ul,
      ol {
        padding-block-end: calc(var(--fs) - var(--fs-one-third));

        li {
          display: flex;
          gap: var(--gap);

          padding-inline-start: var(--grid-single);
          padding-block-end: var(--font-one-third);

          &::before {
            content: "•";
          }
        }
      }
    }
  }

  @container (inline-size < 28.125rem) {
    inner-wrapper {
      table-of-content {
        position: relative;
      }
    }
  }
}


/* grid */
#blog-body {
  inner-wrapper {
    table-of-content {
      grid-column: 1 / span 3;
    }

    blog-body-main {
      display: block;
      grid-column: 5 / span 7;
    }
  }

  @container (inline-size < 28.125rem) {
    inner-wrapper {
      table-of-content {
        grid-column: 1 / -1;
      }

      blog-body-main {
        grid-column: 1 / -1;
      }
    }
  }
}