section.image-with-content {
  margin-top: 3em;
  margin-bottom: 3em;
  font-size: 1.25em;
  text-align: center;
}

section.image-with-content section {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-top: 1em;
  margin-bottom: 1em;
}

section.image-with-content section.content h1, section.image-with-content section.content h2 {
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  color: var(--petrol);
}

section.image-with-content section.image img {
  width: 100%;
}

@media screen and (min-width: 60rem) {
  section.image-with-content {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-collapse: separate;
    border-spacing: 2rem 0;
  }

  section.image-with-content section.image {
    display: table-cell;
    width: 20rem;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    text-align: center;
  }

  section.image-with-content section.content {
    display: table-cell;
    width: calc(100% - 20rem);
    padding: 0;
    margin: 0;
    vertical-align: middle;
    text-align: center;
  }

  section.image-with-content section.image img {
    width: 100%;
    height: 20rem;
  }
}