<style> .article-container { font-family: 'Tajawal', 'sakkal Majalla', sans-serif; padding: 20px 0; } .category-header { background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%); color: white; padding: 15px 20px; margin-bottom: 20px; border-radius: 4px; font-size: 1.8rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 0; list-style: none; } .article-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .article-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .article-link { display: block; text-decoration: none; color: #333; padding: 20px; } .article-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 10px; color: #2c3e50; line-height: 1.4; } .article-date { display: block; color: #7f8c8d; font-size: 0.9rem; margin-top: 10px; text-align: left; } .article-bullet { display: inline-block; width: 8px; height: 8px; background-color: #2fa4e7; border-radius: 50%; margin-left: 10px; vertical-align: middle; } @media (max-width: 768px) { .article-list { grid-template-columns: 1fr; } .category-header { font-size: 1.4rem; padding: 12px 15px; } .article-title { font-size: 1.1rem; } } </style>