.context {
    font-family: var(--font-sans);
    background: var(--color-background-dark);
    max-width: var(--measure);
    padding: var(--space-l);
    border-radius: 12px;
    margin-block-start: var(--space-l);

    p {
        font-size: var(--step-0);
        line-height: 160%;
        margin: 0;
        margin-block-start: var(--space-s);
    }

    h1,
    h2,
    h3,
    h4 {
        font-size: var(--step-0);
        margin-block-start: var(--space-l);
        font-weight: 500;
    }

    sup {
        font-size: var(--step--2);
    }

    .context-meta {
        list-style-type: none;
        padding: 0;
        font-weight: 600;
        margin-top: 0;

        li {
            margin: 0;
            font-size: var(--step--1);
        }

        @media (width >= 600px) {
            display: flex;

            li + li {
                padding-left: var(--space-l);
            }
        }
    }

    .reading-time {
        font-size: var(--step--2);
        text-transform: uppercase;
        color: rgba(0, 0, 0, 0.6);
        margin-top: var(--space-s);
        margin-bottom: 0;
    }
}