.card-post {
    margin-top:1rem;
    background:linear-gradient(to bottom, var(--card-bg, #F2F3F9), var(--card-bg, #F2F3F9), rgba(0,0,0,.02), rgba(0,0,0,.02));
    border-radius:20px;
    overflow:hidden;
    transition:background-color 0.15s ease, transform 0.15s ease;
    font-family:sans-serif;

    a{
        text-decoration:none;
        color:inherit;
        cursor:pointer;
    }

    .card-image {
        width:100%;
        border-radius:15px;
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        background-size:cover;
        background-position:center;
    }

    .card-content{
        padding:1rem;
    }

    .card-content + .card-content{
        padding-top:0;
    }

    .card-image-placeholder {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:0;
        opacity:0;
    }

    .card-title-wrapper, .card-excerpt-wrapper{
        height:90px;
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -webkit-align-items:center;
        -ms-flex-align:center;
        align-items:center;

        .card-title, .card-excerpt{
            max-height:90px;
            flex:1 1 0;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            text-overflow:unset;
            overflow:hidden;
            word-break:break-word;
            transition:all .15s;
        }
        .card-title{
            -webkit-line-clamp:3;
        }
        .card-excerpt{
            -webkit-line-clamp:5;
        }
    }

    .card-title{
        color:var(--card-title, #2C3E50);
        line-height:30px;
        font-weight:400;
        font-size:24px;
    }

    .card-excerpt {
        color:var(--card-excerpt, #7F8C8D);
        font-size:15px;
        line-height:18px;
    }

    &:hover {
        background-color:var(--card-hover-bg, #F4F5F9);
    }

    &:hover .card-title {
        color:var(--card-title-on-hover, #922B55);
    }

    .card-author {
        display:flex;
        align-items:center;
        gap:10px;
    }

    .card-author-avatar {
        width:32px;
        height:32px;
        border-radius:50%;
        object-fit:cover;
    }

    .card-author-info {
        font-size:14px;
        color:var(--card-title, #2C3E50);
    }

    .card-post-content{
        h1, h2, h3, h4{
            font-size:24px;
        }
        h5{
            font-size:20px;
        }
    }
    .card-post-date{
        text-transform:capitalize;
        font-family:"Montserrat", sans-serif;
        font-weight:600;
        font-size:14px;
        color:#7141b1;
        margin-bottom:13px;
        color:#993366;
    }
    .card-post-excerpt{
        color:#6d6d6d;
        font-family:"Nunito Sans", sans-serif;
        font-size:16px;
        line-height:1.875;
    }
    .card-post-btn a{
        color:#301456;
        line-height:20px;
        font-weight:bold;
        text-transform:uppercase;
        i{
            margin-right:8px;
            font-size:20px;
            float:left;
        }
        span{
            font-size:14px;
            display:inline-block;
            float:left;
        }
    }
    .card-post-btn::after{
        display:block;
        content:"";
        clear:both;
    }
}