.article {
  min-height: calc(100svh - var(--header) - var(--space-9));

  @media screen and (min-width: 1024px) {
    max-width: calc(716px * var(--scaling));
    margin: 0 auto;
    padding-left: var(--space-9);
  }

  @media screen and (min-width: 1280px) {
    padding-right: var(--space-9);
  }
}

.body {
  width: 100%;

  > p {
    color: var(--gray-11);
    font-size: var(--font-size-3);
    line-height: var(--line-height-5);
  }

  code[data-type='inline-code'] {
    font-family: var(--font-geist-mono);
    white-space: nowrap;
  }

  p + p {
    margin-top: var(--space-4);
  }

  ul,
  ol {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    padding-left: calc(20px * var(--scaling));

    li {
      &::marker {
        color: var(--gray-11);
      }

      color: var(--gray-11);
      margin-bottom: var(--space-2);

      [data-code-snippet] {
        &:not(:first-child) {
          margin-top: var(--space-2);
        }

        &:not(:last-child) {
          margin-bottom: var(--space-2);
        }
      }
    }
  }

  picture {
    background-color: var(--gray-2);
    padding: var(--space-1);
    display: flex;
    max-width: max-content;
    margin-block: var(--space-6);
    border-radius: var(--radius-4);
    border: 1px solid var(--gray-5);
    z-index: 1;
    position: relative;
    box-shadow: 0px 1px 2px 0px var(--gray-6);
    box-sizing: border-box;

    video,
    img {
      border-radius: var(--radius-3);
      position: relative;
      max-width: 100%;
      height: auto;
    }

    img {
      cursor: zoom-in;
    }

    iframe {
      border: none;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius-3);
    }
  }

  figcaption {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    padding-top: var(--space-5);
    padding-bottom: var(--space-2);
    margin-top: calc(var(--space-8) * -1);
    display: block;
    position: relative;
    text-align: center;
    z-index: 0;
    border-bottom-left-radius: var(--radius-4);
    border-bottom-right-radius: var(--radius-4);
    border: 1px solid var(--gray-5);
    background: var(--gray-3);
    color: var(--gray-11);
    font-size: var(--font-size-2);
    font-weight: 500;
    line-height: var(--space-4);
  }

  *[data-code-snippet] {
    button {
      display: none;
    }

    &:hover {
      button {
        display: block;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;

    p {
      font-size: var(--font-size-2);
      line-height: 1.2;
    }

    a {
      font-size: var(--font-size-2);
      line-height: 1.2;
    }
  }

  > div,
  > blockquote {
    margin-top: var(--space-6);

    &:not(:last-child) {
      margin-bottom: var(--space-6);
    }
  }

  > *:first-child {
    margin-top: 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

.article-footer {
  width: 100%;
}
