.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.blog-filter button{
  font-family:var(--font);font-size:14.5px;font-weight:400;line-height:1;
  padding:11px 18px;border-radius:999px;cursor:pointer;
  background:var(--white);color:var(--t-dark);border:1px solid var(--line-l);
  transition:background .15s,border-color .15s,color .15s;
}
.blog-filter button:hover{border-color:var(--ink);color:var(--ink)}
.blog-filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--t-light)}
.blog-filter button .n{color:var(--t-dark-mut);margin-left:6px}
.blog-filter button[aria-pressed="true"] .n{color:var(--t-light-mut)}
.blog-filter button:focus-visible{outline:2px solid var(--green-deep);outline-offset:2px}
.blog-count{font-size:14px;color:var(--t-dark-mut);margin:0 0 22px}


.blog-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

.blog-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);
  padding:24px;transition:box-shadow .18s,transform .18s;
}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.blog-card .head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--t-dark-mut)}
.blog-card .cat{
  display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;
  background:var(--paper-2);color:var(--ink);letter-spacing:.02em;
}
.blog-card h3{font-family:var(--font-head);font-size:20px;line-height:1.3;color:var(--ink);margin:0}
.blog-card h3 a{color:inherit;text-decoration:none}
.blog-card h3 a:hover{color:var(--green-link)}
.blog-card p{margin:0;color:var(--t-dark-mut);font-size:15.5px;line-height:1.7}
.blog-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.blog-card .tags a{
  font-size:13px;color:var(--green-link);text-decoration:none;
  border:1px solid var(--line-l);border-radius:999px;padding:4px 11px;
}
.blog-card .tags a:hover{border-color:var(--green-link);background:var(--paper)}


.blog-card.is-placeholder{border-style:dashed;background:var(--paper)}
.blog-card.is-placeholder .cat{background:var(--white)}