.card-post {
    margin-top:1rem;
    background:linear-gradient(to bottom, var(--card-bg), var(--card-bg), transparent, transparent);
    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);
        line-height:30px;
        font-weight:400;
        font-size:24px;
    }

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

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

    &:hover .card-title {
        color:var(--card-title-on-hover);
    }

    .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);
    }

    .card-post-content{
        h1, h2, h3, h4{
            font-size:24px;
        }
        h5{
            font-size:20px;
        }
    }
}