.blog-topic-nav {
  display: grid;
  grid-template-columns: minmax(145px,.55fr) repeat(3,minmax(0,1fr));
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px clamp(22px,5vw,64px) 48px;
  border-bottom: 1px solid rgba(23,23,21,.2);
}
.blog-topic-label {
  align-self: start;
  padding-top: 4px;
  color: #66665f;
  font: 10px/1.5 "Roboto Mono","Courier New",monospace;
  letter-spacing: .05em;
}
.blog-topic-group { display: grid; align-content: start; gap: 9px; }
.blog-topic-group h2 {
  margin: 0 0 3px;
  font: 600 15px/1.25 "Noto Sans",sans-serif;
  letter-spacing: -.025em;
}
.blog-topic-group a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(23,23,21,.14);
  color: #585952;
  font: 12px/1.45 "Noto Sans",sans-serif;
  transition: transform .18s ease;
}
.blog-topic-group a span { color: #171715; }
.blog-topic-group a:hover,
.blog-topic-group a:focus-visible { color: #171715; border-color: #b8dc4d; transform: translateX(2px); }
@media (max-width: 760px) {
  .blog-topic-nav { grid-template-columns: 1fr; gap: 17px; padding-top: 8px; padding-bottom: 32px; }
  .blog-topic-label { padding: 0; }
  .blog-topic-group { grid-template-columns: 1fr; }
  .blog-topic-group h2 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-topic-group a { transition: none; }
}