.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    word-wrap: break-word;
    background-clip: border-box;
    background-color: var(--#{$variable-prefix}light);
    box-shadow: $card-box-shadow;
    border-radius: $card-border-radius;
    border: none;
    --padding: 16px;
    
    .header {
        padding: var(--padding);
        background-color: var(--#{$variable-prefix}secondary);
        border-top-left-radius: $card-border-radius;
        border-top-right-radius: $card-border-radius;
    }

    .thumbnail {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-top-left-radius: $card-border-radius;
        border-top-right-radius: $card-border-radius;
    }
    
    .card-body {
        flex: 1 1 auto;
        padding: var(--padding);

        .tag {
            font-weight: 500;
            font-size: 14px;
            color: var(--#{$variable-prefix}primary);
            opacity: 0.8;
        }

        .title {
            font-size: 21px;
            margin-top: 0.5rem;
        }

        .text {
            font-size: 16px;
            font-weight: 500;
            color: gray;
            margin-bottom: 0;
        }

    }
    
    .footer {
        padding: 0 24px 24px 24px;
        
        .author {
            font-weight: 600;
            font-size: 14px;
        }
    
        .date {
            font-size: 13px;
            font-weight: 600;
            color: gray;
        }
    }
}