.article-topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(680px, calc(100% - 32px));
  margin: 24px auto 0;
}
.article-topics a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #e4d8cd;
  border-bottom: 2px solid #d87559;
  border-radius: 8px;
  background: #faf7f2;
  color: #493d35;
  text-decoration: none;
  isolation: isolate;
}
.article-topics img { width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; transform: scale(1.4); }
.article-topics a > span:not(.article-topics-arrow) { font-size: 22.4px; line-height: 28px; font-weight: 700; white-space: nowrap; }
.article-topics-arrow { color: #c86149; font-size: 24px; }
.article-topics a:hover { border-color: #c86149; background: #f4ece3; text-decoration: none; }
.article-topics a:focus-visible { outline: 3px solid #a44731; outline-offset: 4px; }
@media (max-width: 600px) {
  .article-topics { gap: 10px; }
  .article-topics a { grid-template-columns: minmax(0, 1fr) 12px; gap: 2px; padding: 8px; container-type: inline-size; }
  .article-topics img { grid-column: 1 / -1; width: 64px; height: 64px; justify-self: center; }
  .article-topics a > span:not(.article-topics-arrow) { text-align: center; font-size: min(21px, calc((100cqw - 16px) / 7)); line-height: 27px; }
}