@layer components {
    .staldia-article-list {
        display: grid;
        gap: 1.5rem 2rem;
    }
    .staldia-article-card {
        padding: 20px;
        background: var(--color-bg-white);
        border-radius: 5px;
        z-index: 1;
    }
    .staldia-article-card-figure {
        position: relative;
        display: block;
        padding-top: 66.66%;
        overflow: clip;
        border-radius: 5px;
        order: -9;
    }
    .staldia-article-card-img {
        position: absolute;
        top: 0;
        left: 0;
        transition: transform .5s;
    }
    .staldia-article-card-link {
        display: block;
        font-size: 13px;
        line-height: 2;
    }
    .staldia-article-card-link:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9;
    }
    .staldia-article-card-tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--font-size-xxs);
        gap: .75rem;
    }
    .staldia-article-card-tag-link {
        position: relative;
        display: block;
        font-size: 11px;
        padding: .5rem 1rem;
        border: 1px solid;
        border-color: rgb(var(--color-text-rgb) / .2);
        border-radius: 99px;
        line-height: 1.6;
        transition: border-color .5s;
        z-index: 19;
    }
    .staldia-article-card-tag-link:hover { border-color: var(--color-accent); }
    .staldia-article-card-tag-link:before {
        content: "#";
        color: var(--color-text);
        opacity: .5;
        transition: color .5s, opacity .5s;
    }
    .staldia-article-card-tag-link:hover:before {
        color: var(--color-accent);
        opacity: 1;
    }
    .staldia-article-card-tag-text {
        background: rgb(var(--color-text-rgb) / .5);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
    .staldia-article-card:hover .staldia-article-card-img {
        transform: scale(1.1);
    }
    @media (min-width: 750px) {
        .staldia-article-card { padding: 30px; }
        .staldia-article-list {
            grid-template-columns: 1fr 1fr;
        }
    }
    @media (min-width: 900px) {
        .staldia-article-list {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}