.grid {
  display: grid;
  grid-gap: 3em; /*allow for space between grid elements*/
  grid-template-columns: calc( 50% - (3em / 2) ) calc( 50% - (3em / 2) ); /*1 total horizontal gap = 3em*/
  /*top, right, bottom, left*/
  margin: 3em 1em 1em 1em;
}
.grid .name { /*DIV*/
  margin: 0 auto; /*center the content*/
  position: relative;
  width: fit-content;
}
.grid .name > span { /*label*/
  font-family: Vollkorn-italic, serif;
  left: 0;
  letter-spacing: 0.062em;
  padding-left: 1.75ch;
  position: absolute;
  top: -1.5em;
  white-space: nowrap;
}
.grid .name pre { margin-bottom: 0 } /*undo default*/
.grid .name table, .grid .name figure { width: 100% }

@media only screen and (max-width: 936px) { /*design breakpoint*/
  .grid { display: inherit }
  .grid .name { margin-top: 3em }
}

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  .grid {
    margin-left: 0;
    margin-right: 0;
  }
}