.index-posts{
    flex-grow: 1;

    
    display: flex;
    flex-direction: column;
    gap: 2rem;

    &.grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
        grid-auto-rows: auto;
        gap: 1.4rem;
    }
 

    li{
        display: flex;
        flex-direction: column;
        background-color: var(--post-bg);
        padding: 16px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition: box-shadow 0.2s;

        &:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        &.featured {
            border-color: hsl(from var(--accent) h s l / 0.28);
        }

        & .content {
            font-size: 0.9375rem;
            line-height: 1.7rem;

            & img{
                max-height: 10rem;
                max-width: 40%;
                width: auto;
                height: auto;

                float: left;            /* 左浮动，文字环绕 */
                margin-right: 12px;       /* 文字与图片间距 */
                margin-bottom: 8px;       /* 防止浮动影响下面段落 */
                object-fit: cover;
                border-radius: 8px;

                margin: 0 12px 8px 0;

            }   
   
        }

        & .meta {
            font-size: 0.75rem;
            color: var(--text-color-secondary);
            margin-bottom: 0.6rem;
        }

        & .tags {
            text-align: right;
            font-size: 0.75rem;
            margin-top: 0.6rem;

            a{padding-left:0.5rem;}

            a::before{
                content: "#";
                color: var(--bg-dark);
                margin-right: 0.2rem;
       
                font-size:12px;
            }
        }

        & span[data-flag] {
           
                color: var(--accent);
                font-size:1.2rem;
        }
            
    }



}

@media (max-width: 680px) {
    .index-posts {
        gap: 1rem;
    }
}