@layer components {
    .article-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-bottom: 4rem;
    }

    .article-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px;
        padding: 0px;
    }

    .article-card {
        --gap: 16px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        padding: 8px;
        border-radius: 8px;
        text-decoration: none;
    }
    .article-card img {
        border-radius: var(--radius-base-4);
    }

    .article-card {
        color: var(--text-neutral-primary);
        border: 1px solid transparent;
        &:not(.disabled):hover {
            background-color: var(--bg-neutral-secondary);
        }

        &:not(.disabled):active {
            background-color: var(--bg-neutral-secondary);
            border: 1px solid var(--border-neutral-secondary);
        }

        &:not(.disabled):is(:focus-visible, :focus) {
            outline: 2px solid var(--focus);
            outline-offset: -3px;
            border-radius: 8px;
        }

    }

    .article-card .article-card-body {
        --gap: 8px;
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }

    .article-card-body .article-card-body-tags {
        a {
            text-decoration: none;
            margin-inline-end: 12px;
        }
        time {
            color: var(--text-neutral-teritary);
        }
    }

    .article-card.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    @media (min-width: 0px) {
        .article-container {
            gap: 20px;
            margin-bottom: 1rem;
        }
    }

    @media (min-width: 1024px) {
        .article-container {
            gap: 30px;
            margin-bottom: 2rem;
        }
        .article-section {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
    }

    @media (min-width: 1440px) {
        .article-container {
            gap: 40px;
            margin-bottom: 4rem;
        }
    }

}