@layer components {

    .article__head {
        display: grid;
        justify-items: center;
        gap: var(--s-4);
        max-width: 920px;
        margin-inline: auto;
        padding: var(--s-7) var(--gutter) var(--s-7);
        text-align: center;
    }

    .article__title {
        font-size: var(--t-3xl);
    }

    .article__lede {
        max-width: 56ch;
        font-size: var(--t-lg);
        color: var(--c-muted);
    }

    .article__by {
        font-size: var(--t-sm);
        font-weight: 500;
    }

    .article__media {
        max-width: 1280px;
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .article__img {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--r-1);
        background: var(--c-tile);
        object-fit: cover;
    }

}