.blog-content {
    background: var(--clr-surface);

    border-radius: var(--space-3xs-2xs);

    padding-block: var(--space-m-l);
    padding-inline: var(--space-xs-xl);

    margin-block: var(--space-m-l);
    margin-inline: max(calc((100% - var(--max-width)) / 2), var(--space-xs-m));

    /* margin spacing */
    &>*+* {
        margin-block-start: var(--space-m-l);
    }

    &>button {
        margin-block-start: var(--space-l-xl);
    }

    & .date {
        margin-block-start: var(--space-3xs-2xs);
        text-align: center;
        font-family: var(--ff-heading);
        font-size: var(--fs-200);
    }

    & h1 {
        margin-block-start: var(--space-3xs-2xs);
        text-align: center;
    }

    & h1:after {
        --_width: 60;
        --_transx: calc((100 / (2 * var(--_width))) - 0.5);

        width: calc(var(--_width) * 1%);
        transform: translateX(calc(var(--_transx) * 100%));

        content: ' ';
        margin-block-start: var(--space-m-l);
        display: block;
        border: 1px solid var(--clr-text);
        border-radius: var(--space-3xs);
    }

    & h2,
    & h3 {
        margin-block-start: var(--space-l-xl);
    }

    & ul,
    & ol {
        list-style-position: inside;

        &>li {
            margin-inline-start: var(--space-m);
        }

        &>*+li {
            margin-block-start: var(--space-2xs);
        }
    }

    & p>code {
        color: var(--clr-foam);
        font-style: italic;
    }

    & pre {
        padding: var(--space-xs);
        background: var(--clr-overlay);
        font-size: var(--fs-200);
        overflow-x: auto;

        &>code {
            word-wrap: break-word;
        }
    }

    & blockquote {
        border-inline-start: var(--space-3xs) solid var(--clr-high);
        padding-inline-start: var(--space-3xs);
    }

    .explore-footer {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
