.GridPostList {
    .pinned-posts{
        padding: 2rem 0;
        //column-gap: 2px;
        //row-gap: 2px;
        .post-item{
            position: relative;
            height: 350px;
            border-radius: var(--xshop-border-radius) ;
            overflow: hidden;
            background: #333;
            img{
                border-radius: var(--xshop-border-radius) ;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: 400ms;
                opacity: .7;
            }

            .detail{
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                padding: 1rem;
                color: white;
                span{
                    opacity: .5;
                }
            }

            .corner{
                border-radius: var(--xshop-border-radius) ;
                position: absolute;
                inset-inline-start: 0;
                top: 0;
                background: var(--xshop-primary);
                color: var(--xshop-diff);
                z-index: 2;
                padding: 4px 1rem;
                font-size: 17px;

            }

            &:hover{
                img{
                    transform: scale(1.6);
                }
            }
        }
    }

    .grid-post-item{
        position: relative;
        margin-bottom: 1rem;
        overflow: hidden;
        img{
            width: 100%;
            height: 300px;
            object-fit: cover;
            margin-bottom: 1rem;
            border-radius: var(--xshop-border-radius) ;
            transition: 500ms;
        }

        p{
            text-align: justify;
            height: 4em;
            overflow: hidden;
        }

        .corner{
            border-radius: var(--xshop-border-radius) ;
            position: absolute;
            inset-inline-start: 0;
            top: 0;
            background: var(--xshop-primary);
            color: var(--xshop-diff);
            z-index: 2;
            padding: 4px 1rem;
            font-size: 17px;

        }

        &:hover{
            img{
                filter: contrast(1.2) grayscale(.5);
            }
        }
    }
}
