.row{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding:24px 0;
}

.card-container{
        width: 376px;
        height: 460px;
        background: #fff;
        border-radius: 12px;
        padding: 0 !important;
        overflow: hidden;
        margin: 12px;
}

.card-container a:hover{
    text-decoration: none;
}
.card-container .card-img-top{
        width:100%;
        height:210px;
}

.card-container .card-body{
        position: relative;
        height: 250px;
        padding: 20px;
}

.card-container .card-body::after{
    position: absolute;
    left:0;
    bottom:0;
    content: '';
    width:100%;
    height:8px;
    background: #4C7CD7
}

.card-container .card-title{
        height:48px;
        color: #333;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
}

.card-container .card-text{
        font-size: 12px;
        line-height: 18px;
        color: #33333399;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
}

.card-container .card-footer{
    position: absolute;
    bottom: 15px;
    width:344px;
}

.card-container .card-footer .author{
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

.card-container .card-footer .author-avatar{
    width: 24px;
    height: 24px;
    margin-right:10px;
}

.pagination-container{
       text-align:center;
       margin-top:20px;
}
.pagination-container #pagination .current{
    background:#4C7CD7;
}