h1 {
  background: var(--primary);
  color: var(--surface);
  text-align: center;
  font-size: var(--scale-40, 40px);
  padding: var(--scale-40) var(--padding-inline);
}

/*============================
#data
============================*/
section#data {
  padding: var(--padding-block) var(--padding-inline);
  background: var(--surface-variant);
}
section#data figure {
  width: 100%;
  max-width: 640px;
  border: 3px solid var(--primary);
  margin-inline: auto;
  padding: var(--padding-inline);
  background: var(--surface);
}
section#data figure img {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

/*============================
#article
============================*/
section#article {
  padding: var(--padding-block) var(--padding-inline);
  font-size: var(--scale-16);
  color: var(--on-surface);
  line-height: 170%;
}
section#article .article__container {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  overflow-x: scroll;
}
section#article .article__container h2 {
  font-size: var(--scale-24);
  background: var(--primary);
  text-align: center;
  width: 100%;
  padding: var(--scale-8);
  color: var(--surface);
}
section#article .article__container p {
  margin-top: var(--scale-16);
}
section#article .article__container table {
  margin-top: var(--scale-16);
  font-size: var(--scale-12);
  table-layout: auto;
}

section#article .article__container .wp-block-table thead {
  border-bottom: none;
}
section#article .article__container table th {
  line-height: 130%;
  background: var(--primary);
  text-align: center;
  color: var(--surface);
  vertical-align: middle;
}
section#article .article__container table tr td {
  text-align: center;
  vertical-align: middle;
  line-height: 130%;
  min-width: 80px;
}
section#article .article__container table tr td:nth-of-type(1) {
  background-color: var(--primary-container);
  font-weight: bold;
  color: var(--primary);
}