/* One card system for procedure articles and the blog listing. */
#main .article-grid{display:grid;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;padding-bottom:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px var(--grid-gap)}
#main .article-grid>article{min-width:0;margin:0;padding:0;border:0}
#main .article-grid>article[hidden]{display:none}
#main .article-grid>article>a{display:block;color:inherit;text-decoration:none}
#main .article-grid>article>a>img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:none;background:var(--soft);border-radius:0}
#main .article-grid h3{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:24px 0 12px;font-size:var(--type-card);font-weight:var(--weight-heading);line-height:var(--leading-heading);color:var(--ink)}
#main .article-grid h3 svg{flex:0 0 18px;width:18px;height:18px;margin-top:5px;color:var(--purple)}
#main .article-grid article p{margin:0;font-size:var(--text-body);line-height:var(--leading-body);color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#main .article-grid a:hover h3{color:var(--purple)}
#main .article-grid a:focus-visible{outline:2px solid var(--purple);outline-offset:6px}

@media(max-width:760px){#main .article-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px)/1.5);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--purple-line) transparent}#main .article-grid>article{scroll-snap-align:start;scroll-snap-stop:always;opacity:1;transform:none;translate:none}#main .article-grid h3{margin:20px 0 12px;font-size:16px!important;line-height:1.5!important}#main .article-grid h3 svg{flex-basis:16px;width:16px;height:16px;margin-top:4px}#main .article-grid article p{font-size:var(--text-body-small)}}