.blog-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:25px;padding:20px}
.article-card{background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.05);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;border:1px solid #f0f0f0}
.article-card:hover{box-shadow:0 8px 15px rgba(0,0,0,.1)}
.article-content-wrapper{padding:20px}
.article-header{margin-bottom:15px}
.article-title{font-size:1.4rem;font-weight:600;color:#2c3e50;margin:0 0 10px 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-meta{color:#7f8c8d;font-size:.9rem;margin-bottom:15px}
.article-excerpt{color:#34495e;line-height:1.6;font-size:1rem;margin-bottom:20px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:110px}
.read-more{display:block;text-align:center;padding:12px 20px;background:#3498db;color:#fff;text-decoration:none;font-weight:500}
.read-more:hover{background:#2980b9}
.blog-container.compact{display:flex;flex-direction:column;gap:15px}
.article-card.compact{display:flex;align-items:flex-start;background:#fff;border-radius:8px;padding:15px;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.article-card.compact .article-content-wrapper{flex:1;margin-right:15px}
.article-card.compact .article-title{font-size:1.2rem;margin:0 0 8px 0}
.article-card.compact .article-meta{font-size:.85rem;margin-bottom:8px}
.article-card.compact .article-excerpt{font-size:.95rem;line-height:1.5;-webkit-line-clamp:2}
.article-card.compact .read-more{padding:8px 16px;font-size:.9rem}
@media (max-width:900px){
.blog-container{grid-template-columns:1fr;gap:15px;padding:10px}
.article-card{border-radius:8px}
.article-title{font-size:1.2rem}
.article-excerpt{font-size:.95rem}
}
@media (max-width:768px){
.blog-container{grid-template-columns:1fr;gap:5px;padding:10px}
.article-content-wrapper{padding:15px}
.container{padding:5px}
}
@media (max-width:480px){
.article-card{padding:0}
.read-more{padding:10px 15px;font-size:.9rem}
.article-meta{font-size:.8rem}
}