/* Keep each heading, illustration, and its copy in one independent grid. */
#kod-preview #kod-screen-article .prenatal-opening { display: flow-root; }
#kod-preview #kod-screen-article .article-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  grid-template-areas: "heading heading" "copy illustration";
  column-gap: 24px;
  align-items: start;
  clear: both;
}
#kod-preview #kod-screen-article .article-section > h2 { grid-area: heading; }
#kod-preview #kod-screen-article .article-section > figure {
  grid-area: illustration;
  float: none;
  clear: none;
  width: 100%;
  max-width: 400px;
  justify-self: end;
  margin: 0 0 14px;
}
#kod-preview #kod-screen-article .article-section > .section-copy {
  grid-area: copy;
  min-width: 0;
}
#kod-preview #kod-screen-article .article-section > .section-copy > p:first-child { margin-top: 0; }
#kod-preview #kod-screen-article .article-body figure img { width: 100%; height: auto; }
@media (max-width: 700px) {
  #kod-preview #kod-screen-article .prenatal-opening { display: flex; flex-direction: column; }
  #kod-preview #kod-screen-article .prenatal-opening .opening-figure { order: 0; }
  #kod-preview #kod-screen-article .prenatal-opening .opening-before { order: 1; }
  #kod-preview #kod-screen-article .prenatal-opening > :not(.opening-before):not(.opening-figure) { order: 2; }
  #kod-preview #kod-screen-article .article-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "illustration" "copy";
  }
  #kod-preview #kod-screen-article .article-section > figure {
    width: min(100%, 310px);
    justify-self: center;
    margin: 13px auto;
  }
}