.article-list {
    --article-gap: 4rem;

    display: flex;
    flex-direction: column;
    gap: var(--article-gap);

    .article-item {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        padding-bottom: var(--article-gap);
        max-width: 70rem;

        &:not(:last-child) {
            border-bottom: 1px solid var(--border-color);
        }

        > img {
            aspect-ratio: 3 / 1;
            width: 100%;
            object-fit: cover;
            border-radius: 2px;

        }

        h2 {
            color: var(--font-color);
            font-size: var(--font-xlarge);
            font-weight: 700;
        }

        p {
            color: var(--font-color);
            font-size: var(--font-medium);
            font-weight: 300;
            margin-bottom: 0;
        }
    }

    .author {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        font-size: var(--font-small);
        color: var(--font-color);

        > img {
            height: 2rem;
            width: 2rem;
            border-radius: 50%;
        }
    }
}