.breadcrumbs a { color: var(--color1) !important; } .articles-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 185px; } .article-card { display: flex; flex-direction: row; background: #ffffff; border-radius: 12px; border: 3px solid white; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; } .article-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .article-image { width: 360px; height: 280px; flex-shrink: 0; } .article-image img { width: 100%; height: 100%; object-fit: contain; } .article-content { flex-grow: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; border-left-style: solid; border-width: 5px; border-color: var(--main-bg); } .article-title { margin: 0 0 10px 0; font-size: 1.5rem; color: var(--text-main); line-height: 25px; } .article-preview { margin: 0 0 20px 0; font-size: 1rem; line-height: 1.5; } .article-meta { font-size: 0.85rem; color: #999; display: flex; gap: 15px; } @media (max-width: 768px) { .article-content { border-left-style: none; } .article-card { flex-direction: column; } .article-image { width: 100%; height: 180px; } .article-content { padding: 20px; } }