.article-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.article-card {
    display: block;
    background: #fff;
    border: 1px solid #d9d2c8;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}

    .article-card:hover {
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        transform: translateY(-2px);
        color: inherit;
        text-decoration: none;
    }

    .article-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }

.article-card-body {
    padding: 16px;
}

    .article-card-body h4 {
        margin-bottom: 8px;
    }

    .article-card-body p {
        font-size: 0.9rem;
        color: #666;
        margin-bottom: 0;
    }

.article-detail-image {
    max-width: 260px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    margin: 16px 0 24px;
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.7;
}

    .article-body h3 {
        margin-top: 28px;
        margin-bottom: 12px;
    }

    .article-body p {
        margin-bottom: 16px;
    }

    .article-body ul {
        margin-bottom: 16px;
    }