.articles-intro { max-width: 720px; text-align: center; margin: 0 0 1.75rem; color: #59665f; font-size: 1rem; }
.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; width: 100%; margin: 0 0 2rem; align-items: stretch; }
.article-card { display: flex; flex-direction: column; align-items: stretch; overflow: hidden; border: 1px solid #dfe8e2; border-radius: 14px; background: #fff; color: #333; box-shadow: 0 4px 18px #153d2710; transition: box-shadow .18s, border-color .18s; }
.article-card:hover { border-color: #009966; box-shadow: 0 8px 24px #153d2720; }
.article-card:focus-visible { outline: 3px solid #009966; outline-offset: 4px; }
.article-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #f4f3eb; }
.article-card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 1.3rem 1.5rem 1.5rem; flex: 1; }
.article-card :is(h2, h3) { font-size: 1.4rem; margin: .55rem 0 .7rem; color: #234838; }
.article-card p { margin: 0 0 1rem; color: #59665f; font-size: 1rem; }
.article-card-more { color: #007a52; font-weight: 600; margin-top: auto; }
@media (max-width: 650px) { .article-grid { grid-template-columns: 1fr; gap: 1.25rem; } .article-card-body { padding: 1rem 1.2rem 1.25rem; } .article-card :is(h2, h3) { font-size: 19px; } .article-card p { font-size: 15px; } .article-card-more { font-size: 13px; } .articles-intro { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .article-card { transition: none; } }