@media screen and (min-width:@mobile-device) {
    
    .container {
        background-color: @bgColor;
        padding: @padding-general;
        // .border-normal();
        margin: @margin-general auto;
        margin-top: @top-nav-bar-height;
        border-radius: 20px;
        .font-normal();
        width: 100%;
        min-height: 100vh;
        overflow: auto;
        top: @top-nav-bar-height;
        left: 0;
        .title {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            .title-main{
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                .pick{
                    margin-left: @margin-general;
                    justify-self: flex-start;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    flex-shrink: 0;
                    flex-wrap: wrap;
                    .pick-inner{
                        margin:0 @margin-general;
                        p{
                            margin: @margin-general 0;
                        }
                        i{
                            .cusor-pointer();
                           margin-right: @margin-general;
                           &.active{
                            color: @activeColor;
                           }
                        }
                    }
                }
            }
            .post {
                .flexbox();
                flex-shrink: 0;
                .ball(4.5rem, rgb(8, 185, 23));
                color: @hoverTextColor;
                transition: all ease 0.5s;
                font-size: @big-text;
                cursor: url(@/assets/img/Hand2.cur), pointer;

                &:hover {
                    background-color: @themeColor;
                    transform: translateY(-10px);
                }
            }
            
        }
        .bottom{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
        }
        .grid {
            position: relative;
        }
    }
    
}
@media screen and (min-width:@smallpc-device) {
    .container {
        margin-top: 0;
        margin: @margin-general auto;
        width: 100%;
        transform: translateX(0);
        .grid{
            .grid-item{
                width: 24.4%;
                .info{
                    .author{
                        flex-direction: row;
                        align-items: flex-end;
                        .right{
                            margin-top: unset;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (min-width:@normal-device) {
    .container {
        margin-top: 0;
        margin: @margin-general auto;
        width: 124%;
        transform: translateX(-9.5%);
        .grid{
            .grid-item{
                width: 24.5%;
            }
        }
    }
}