.layout {
  display: flex;
  flex-wrap: wrap;
  margin-top: -1em;
  /* margin-left: -3.5em; */
  align-items: center;
}
.layout:not(:first-of-type) {
  margin-top: 3em;
}
.layout:nth-child(even) {
  flex-direction: row-reverse;
}
.layout__item {
  padding-top: 1em;
  /* padding-left: 3.5em; */
}
.layout__item--body {
  flex-grow: 9999;
  flex-basis: 15rem;
  /* border: 1px solid rgb(128, 83, 0); */
}
.layout__item--center {
  /* flex-grow: 9999; */
  flex-basis: 15px;
}
.layout__item--figure {
  margin-right: auto;
  flex-grow: 1;
  text-align: center;
  /* border: 1px solid rgb(128, 83, 0); */
}
@supports (max-width: max-content) {
  .layout__item--figure {
    min-width: 15rem;
    max-width: max-content;
    flex-basis: 15rem;
    flex-grow: 99999;
  }
}

@media only screen and (max-width: 816px) {
  .content_div {
    padding: 10px;
    width: unset;
  }
  .layout {
    flex-direction: column;
  }
  .layout:not(:first-of-type) {
    flex-direction: column;
  }
  .layout:nth-child(even) {
    flex-direction: column;
  }
  .layout__item {
  }
  .layout__item--body {
    flex-basis: unset;
  }
  .layout__item--center {
  }
  .layout__item--figure {
    display: block;
    margin: auto;
    min-width: unset;
    max-width: unset;
    flex-basis: unset;
    flex-grow: unset;
  }
}

/* body {
    max-width: 64em;
    margin-right: auto;
    margin-left: auto;
    padding: 3em 1em;
    line-height: 1.5em;
    font-family: sans-serif;
  } */

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.layout__item * + * {
  margin-top: 1em;
}