.blog-post {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

.article-figure {
  max-width: 620px;
  margin-inline: auto;
}

.article-figure svg {
  min-width: 0;
}

.article-heatmap {
  margin: 1.5rem 0;
}

.article-heatmap figcaption {
  color: var(--soft);
  font-size: 0.9rem;
}

.blog-table caption {
  padding: 0.8rem;
  color: var(--text);
  text-align: left;
}

.article-heatmap .blog-table td {
  color: #f4f8ff;
  border: 3px solid var(--panel);
}

.article-heatmap .score-6 {
  background: #263e58;
}

.article-heatmap .score-7 {
  background: #255168;
}

.article-heatmap .score-8 {
  background: #196575;
}

.article-heatmap .score-9 {
  background: #176957;
}

.article-heatmap .score-10 {
  background: #206e3d;
}

@media (max-width: 480px) {
  .blog-post {
    padding: 1.05rem;
  }

  .article-figure {
    padding: 0.45rem;
  }

  .blog-table th,
  .blog-table td {
    padding: 0.45rem 0.4rem;
    font-size: 0.8rem;
  }

  .blog-table thead th {
    font-size: 0.7rem;
    letter-spacing: 0.01em;
  }
}