.blog-content {
    --color-code-text: rgb(var(--color-red-700-rgb));
    --color-code-bg: var(--color-mask-shade-5);
    --spacing-top-bottom-base: var(--size-spacing-16);
}

.blog-post .blog-content h2 {
    margin-top: 2.5rem;
}

.blog-post .blog-content h3 {
    margin-top: 2rem;
}

.blog-post .blog-content h4 {
    margin-top: 1.5rem;
}

.blog-post .blog-content h2,
.blog-post .blog-content h3,
.blog-post .blog-content h4 {
    margin-bottom: var(--size-spacing-8);
}



/* Перечень чекбоксов */
.contains-task-list {
    list-style: none;
    padding-left: 0;
}

    .contains-task-list li {
        padding: var(--size-spacing-2) 0;
    }


/* Таблицы */


.blog-post .blog-content table {
    border-collapse: collapse;
    width: 100%;
}

.blog-post .blog-content th,
.blog-post .blog-content td {
    border: 1px solid rgb(var(--color-secondary-500-rgb));
    padding: var(--size-spacing-8);
    background-color: rgb(var(--color-secondary-0-rgb));
}

.blog-post .blog-content th {
    background-color: rgb(var(--color-secondary-200-rgb));
    text-align: left;
}



/* Цитаты */


.blog-content blockquote {
    margin: var(--spacing-top-bottom-base) 0;
    padding: var(--size-spacing-12) var(--size-spacing-16);
    border-left: 4px solid rgb(var(--color-primary-200-rgb));
    background-color: var(--color-mask-shade-5);
    border-radius: var(--size-radius-base);
}

        .blog-content blockquote p {
            font-style: italic;
            color: rgb(var(--color-neutral-500-rgb));
        }


    /* CODE */

    .blog-content code:not(pre code) {
        color: var(--color-code-text);
        padding: var(--size-spacing-2) var(--size-spacing-4);
        font-family: Consolas, "Courier New", monospace;
        font-size: 0.95em;
    }

    .blog-content p code {
        background-color: var(--color-code-bg);
        border-radius: var(--size-radius-xs);
    }



.blog-content .code-block {
    display: flex;
    flex-direction: column;
    gap: var(--size-spacing-16);
    padding: var(--size-spacing-16);
    background-color: var(--color-code-bg);
    border-radius: var(--size-radius-xl);
    margin: var(--spacing-top-bottom-base) 0;
}

    .blog-content .code-header {
        font-size: 0.85em;
        font-weight: 500;
        color: rgb(var(--color-neutral-300-rgb));
    }

    .blog-content .code-block pre {
        margin: 0;
        overflow-x: auto;
        padding: var(--size-spacing-12);
    }


    .blog-content .code-block pre,
    .blog-content .code-block pre span {
        font-family: Consolas, "Courier New", monospace;
        font-size: 0.95em;
    }

    /* Изображения */

.blog-content .blog-image {
    width: 100%;
    margin: var(--size-spacing-24) 0;
}

    .blog-content .blog-image img {
        max-width: 100%;
        height: auto;
        border-radius: var(--size-radius-base);
        border: 1px solid rgb(var(--color-secondary-500-rgb));
    }

    .blog-content .blog-image figcaption {
        margin-top: var(--size-spacing-8);
        font-size: var(--size-font-secondary);
        color: rgb(var(--color-neutral-400-rgb));
        text-align: center;
    }