.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:24px}
.blog-card{border:1px solid #dce5ef;border-radius:16px;overflow:hidden;background:#fff}
.blog-card a{display:block;height:100%;color:inherit;text-decoration:none}
.blog-card a:hover h2,.blog-card a:focus-visible h2{color:#1565c0}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#edf5fc}
.blog-card a>div{padding:22px}
.blog-card h2{font-size:1.25rem;line-height:1.3;font-weight:650;margin:9px 0 16px}
.blog-meta{font-size:.875rem;color:#52657b}
.blog-read,.blog-back{color:#1565c0;font-weight:600;font-size:.9rem}
.blog-article{width:min(100% - 40px,960px);margin:auto;padding:64px 0 80px}
.blog-article header,.blog-prose{max-width:740px;margin:auto}
.blog-article header .blog-meta{margin:24px 0 10px}
.blog-article .pv-h1{font-size:clamp(2rem,5vw,3.5rem)}
.blog-cover{width:100%;height:auto;max-height:520px;object-fit:contain;background:#edf5fc;border-radius:16px;margin:32px 0}
.blog-prose{font-size:1.0625rem;line-height:1.75;overflow-wrap:anywhere}
.blog-prose :is(p,ul,ol,figure,blockquote,table){margin:0 0 1.25rem}
.blog-prose :is(ul,ol){padding-inline-start:1.5rem}
.blog-prose ul{list-style:disc}.blog-prose ol{list-style:decimal}
.blog-prose :is(h2,h3,h4,h5,h6){font-weight:650;line-height:1.3;margin:1.75em 0 .65em}
.blog-prose h2{font-size:1.7rem}.blog-prose h3{font-size:1.35rem}
.blog-prose a{color:#1565c0;text-decoration:underline}
.blog-prose blockquote{padding-left:1rem;border-left:3px solid #b8d4f3}
.blog-prose :is(figure,img,iframe){max-width:100%}
.blog-prose img{height:auto}.blog-prose iframe{width:100%;height:auto;aspect-ratio:16/9}
.blog-prose figure>div{padding:0!important}
.blog-prose td,.blog-prose th{padding:.5em;border:1px solid #dce5ef}

/* Keep the final blog cards comfortably separated from the footer. */
body:has(.blog-grid) main{padding-bottom:80px}
@media(min-width:768px){body:has(.blog-grid) main{padding-bottom:120px}}