.article-card {
        background-color: #fff;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        height: 100%;

        .article-card-image {
            img {
                width: 100%;
                aspect-ratio: 3/2;
                object-fit: cover;
                border-radius: 12px 12px 0 0;
            }
        }

        .article-card-content {
            padding: 20px 20px 0 20px;

            .category {
                background-color: var(--primary-color);
                border-radius: 4px;
                padding: 4px 12px;
                display: inline-block;

                span {
                    color: #fff;
                    font-size: 12px;
                    font-weight: 600;
                    display: block;
                    max-width: 120px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    a {
                        color: inherit;
                    }
                }

                a {
                    color: #fff;
                    font-size: 12px;
                    font-weight: 600;
                    display: block;
                    max-width: 120px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .date {
                font-size: 12px;
                color: var(--text-color);
            }

            .article-title {
                font-size: 18px;
                color: var(--text-color);
                line-height: 28px;
                font-weight: 300;
                margin-top: 12px;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                height: 56px;

                a {
                    color: var(--text-color);
                }
            }

            .author-img {
                width: 32px;
                height: 32px;
                border-radius: 50%;
            }

            .author {
                color: var(--primary-color);
                font-weight: 600;
                font-size: 14px;
            }

            .article-description {
                font-size: 14px;
                line-height: 20px;
                color: var(--text-color);
                margin: 12px 0 14px;
                letter-spacing: 0;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                font-weight: 300;
            }
        }

        .article-card-footer {
            padding: 0 20px 20px 20px;

            .article-details {
                span {
                    font-size: 12px;
                    color: var(--text-color);
                }
            }

            .article-read-more {
                span {
                    font-size: 14px;
                    color: var(--primary-color);
                    font-weight: 600;
                    display: inline-block;
                    margin-right: 5px;
                }
            }
        }
    }

    @media(max-width: 1240px) {
        .article-card {
            .article-card-footer {
                .article-details {
                    span {
                        font-size: 11px;
                    }
                }
            }
        }
    }

    @media(max-width: 992px) {
        .article-card {
            .article-card-footer {
                .article-details {
                    span {
                        font-size: 12px;
                    }
                }
            }
        }
    }