.article-wrapper {
    position: relative;
    margin-inline-start: var(--wide);
    inline-size: 100%;
    word-wrap: break-word;

    @media (max-width: 50rem) {
        margin-inline-start: 0;
    }

    #post-header {
        max-width: 80ch;
        margin-block: 5rem 2rem;

        > #post-title {
            font-size: 4rem;
            line-height: 4rem;
            margin-block: 0 0.5rem;
        }

        > #post-info {
            > #post-type {
                color: var(--accent);
            }
        }
    }

    &::after {
        content: "";
        position: absolute;
        inset-block-start: calc(-1 * var(--wide));
        margin-inline-start: calc(-1 * var(--wide));
        background-color: var(--accent);
        inline-size: calc(100% + calc(2 * var(--wide)));
        block-size: 6rem;
        z-index: -1;

        @media (max-width: 50rem) {
            margin-inline-start: calc(-1 * var(--narrow));
            inline-size: calc(100% + calc(2 * var(--narrow)));
        }
    }
}