li.post-item {
    --featured: #f5fafc;
    --post-bg: #fdfeff;

    margin-bottom: 4rem;
    background-color: var(--post-bg);


    & .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;

        padding: 0.8rem 1.6rem;

        background-color: inherit;        
        border-bottom: 1px solid hsl(from var(--text) h s l / 8%);
       
        /*sticky featured*/
        &.featured {
            background-color: var(--featured);
        }

        &>h3 {
            font-family: var(--font-serif);
            font-weight: 300;
            font-size: 1.5rem;

            & a {               

                &::before {
                    content: "#";
                    color: var(--tag-color);
                    margin-right: 0.2rem;
                    font-size: inherit;
                }
            }

        }

        & .sub {
            & span{
                font-size: 0.8rem;
                color: var(--bg-subtler);
            }
        }



        &>h3>span {
            color: var(--featured);
            user-select: none;
        }

    }

    & article {
        min-height: 6rem;
        padding: 1.2rem 1.6rem;

        & .date {
            margin-bottom: 10px;
            text-align: right;
        }
    }



    & .content {
        margin-bottom: 10px;
        line-height: 2rem;

        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;
            /* 可加 border-radius 等美化 */


        }
    }


}

.banner-post{
    --offset: 0;
    width: 100%;
    height: 160px;
    margin-bottom: 3rem;

    display: flex;
    justify-content: center;
    align-items: center;

    background-position: center center;
    background-size:auto 140%;
    background-repeat: no-repeat;

    position:relative;
    overflow: hidden;  

    &::before{
        content:"";
        position:absolute;
        right:0;
        left:0;
        top:0;
        bottom:0;
        z-index: 0;

        background: inherit;
        background-size: inherit;
        background-position: inherit;
        background-repeat: inherit;
        --blur-offset: calc(var(--offset) * var(--offset) * 20px );
        filter: blur(var(--blur-offset));
        --scale-offset: calc(1 - var(--offset) / 20);
        transform: scale(var(--scale-offset));


    }

    & h1{ 
        padding-bottom:0.5rem;
        margin-left: max(-18rem, -15vw);

        position:relative;
        z-index: 2;
        user-select: none;

        & span{
            display: block;

            &:first-child{
                font-weight: 600;
                padding-left: 0.4rem;
                font-size: min(1.6rem, 9vw);
                color: #ee0e0e;
                /* --trans-offset: calc(var(--offset) * 5px);
                transform: translateX(var(--trans-offset)); */

            }
            &:last-child{
                font-weight: 200;
                font-size: min(2.2rem, 10vw);
                font-family: var(--font-serif);
                font-style: italic;
                color: #a7a7a7;
                font-weight:300;
                color:#8f8f8f;
                --trans-offset: calc(1 * var(--offset) * 25px);
                transform: translateX(var(--trans-offset));
            }
        }

    }
    @media (max-width: 580px){
        & h1{
            margin-left:0;
        }
    }
    
}