.blog-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 24px 48px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--card);
}

.blog-article .blog-article-title {
  font-size: 31px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}

.blog-article h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 40px 0 10px;
}

.blog-article h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 26px 0 8px;
}

.blog-article p {
  margin: 0 0 18px;
}

.blog-article a {
  color: var(--accent);
  text-decoration: underline;
}

.blog-article em {
  color: var(--dim);
}

.blog-article ul,
.blog-article ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.blog-article li {
  margin: 0 0 6px;
}

.blog-article blockquote {
  margin: 0 0 18px;
  padding: 8px 16px;
  border-left: 3px solid var(--line-strong);
  color: var(--dim);
  font-style: italic;
}

.blog-article figure {
  margin: 26px 0;
  padding: 0;
}

.blog-article img {
  max-width: 100%;
  height: auto;
}

.blog-article figure img {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

.blog-article figcaption {
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  margin-top: 8px;
}

.blog-article .banner {
  font-size: 13px;
  line-height: 1.5;
  color: #7a6a3a;
  background: #fbf4dd;
  border: 1px solid #efe4bd;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 28px;
}

.dark .blog-article .banner {
  color: #e3d5a8;
  background: rgba(122, 106, 58, 0.16);
  border-color: rgba(227, 213, 168, 0.24);
}