.article-page {
  article {
    & > * {
      width: 100%;
      max-width: 752px;
      margin-left: auto;
      margin-right: auto;
    }

    h1 {
      display: none;
    }

    :is(h2, h3, h4, h5, h6) {
      margin-top: var(--spacing-64px);
      margin-bottom: var(--spacing-8px);
    }

    h2 {
      font-size: var(--text-h5);
      line-height: var(--text-h5--line-height);
      font-weight: var(--text-h5--font-weight);
      margin-bottom: var(--spacing-8px);
    }

    h3 {
      font-size: var(--text-h6);
      line-height: var(--text-h6--line-height);
      font-weight: var(--text-h6--font-weight);
    }

    h4 {
      font-size: var(--text-h7);
      line-height: var(--text-h7--line-height);
      font-weight: var(--text-h7--font-weight);
    }

    p {
      font-size: var(--text-p2);
    }
    :is(ul, ol) li {
      font-size: var(--text-p2);
    }

    p {
      margin-top: var(--spacing-24px);

      code {
        font-size: 14px;
        line-height: 24px;
        border-radius: var(--radius-4px);
        background-color: var(--color-black-50);
        border: 1px solid var(--color-black-100);
        padding: 0 var(--spacing-8px);
      }
    }

    :is(ul, ol) {
      margin-top: var(--spacing-12px);
      display: grid;
      gap: var(--spacing-12px);

      li {
        position: relative;
      }
    }

    ol {
      counter-reset: item;
      
      li {
        padding-left: 44px;
        counter-increment: item;
      }
      li::before {
        content: counter(item); /* выводим номер с точкой */
        position: absolute;
        left: 16px;
        top: 5px;
        color: var(--color-background);
        background-color: var(--color-foreground);
        padding: 0 4px;
        min-width: 16px;
        height: 16px;
        font-size: 11px;
        font-weight: 500;
        font-family: "Montserrat", sans-serif;
        line-height: 16px;
        border-radius: 9999px;
        text-align: center;
      }
    }

    ul {
      li {
        padding-left: 35px;
      }
      li::before {
        position: absolute;
        content: "";
        left: 12px;
        top: 10px;
        width: 7px;
        height: 7px;
        border-radius: 9999px;
        background-color: var(--color-foreground);
      }
    }

    figure {
      display: grid;
      gap: 16px;
      margin-top: var(--spacing-24px);

      img {
        width: 100%;
        border-radius: var(--spacing-20px);
      }

      figcaption {
        font-size: var(--text-p4);
        line-height: var(--text-p4--line-height);
        color: var(--color-black-600);
        font-weight: 500;
        font-family: "Montserrat", sans-serif;
        width: 100%;
        max-width: 752px;
        margin-left: auto;
        margin-right: auto;
      }
    }
    figure.big-image {
      max-width: unset;
    }

    pre {
      margin-top: var(--spacing-32px);
    }
    
    blockquote {
      display: flex;
      flex-direction: column;
      gap: 12px;
      border-radius: var(--radius-20px);
      padding: var(--spacing-24px);
      background-color: var(--color-black-50);
      margin-top: var(--spacing-32px);
    }
  }
}

.dark {
  .article-page {
    article {
      p {
        code {
          background-color: var(--color-black-800);
          border: 1px solid var(--color-black-700);
        }
      }

      figure {
        figcaption {
          color: var(--color-black-300);
        }
      }

      blockquote {
        background-color: var(--color-black-800);
      }
    }
  }
}