.blog-index .article-heading h1 { max-width: 19ch; }
.blog-index .article-heading { padding-bottom: 3.5rem; }
.blog-posts { padding-bottom: 1rem; }
.blog-posts__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid #dfe4ea; padding-top: 1.75rem; margin-bottom: 1.75rem; }
.blog-index .blog-posts__heading h2 { margin: 0; font-size: 1.4rem; font-weight: 650; }
.blog-posts__heading > span { color: #637086; font-size: .85rem; white-space: nowrap; }
.blog-posts__grid { display: grid; gap: 1.5rem; }
.blog-post { overflow: hidden; border: 1px solid #dfe4ea; border-radius: 1.4rem; background: #fff; }
.blog-post__link { display: grid; grid-template-columns: 1fr 1fr; color: inherit; text-decoration: none; }
.blog-post__image { display: block; width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.blog-post__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem,4vw,3.5rem); }
.blog-index .blog-post h2 { font-size: clamp(1.65rem,2.8vw,2.6rem); line-height: 1.2; font-weight: 650; margin: .25rem 0 1rem; }
.blog-post__description { color: #637086; line-height: 1.75; margin: 0 0 1.5rem; }
.blog-post__read { color: #527a20; font-weight: 750; display: inline-flex; gap: .75rem; text-decoration: underline; text-underline-offset: .3rem; }
.blog-post__link:hover h2 { color: #527a20; }
.blog-post__link:focus-visible { outline-offset: -4px; border-radius: inherit; }
@media(max-width:700px) { .blog-post__link { grid-template-columns: 1fr; } .blog-post__image { min-height: 0; height: auto; aspect-ratio: 16 / 10; } .blog-index .article-heading { padding-bottom: 2rem; } }