h2 {
  line-height: var(--line-height-em);
}

.splash {
  margin-bottom: calc(var(--line-height-em)*5);
}

.overlapping-element {
  margin-top: calc(var(--line-height-em)*3);
}


.overlapping-element__image-wrapper {
  display: block;
  width: 30em;
}

.overlapping-element__text {
  width: 30em;
}

@media screen and (max-width:639px) {
  .overlapping-element {
    display: block;
    margin-bottom: calc(var(--line-height-em) * 7);
  }

  .overlapping-element__image-wrapper {
    width: 100%;
    margin-right: 0;
    max-height: 250px;
    margin-bottom: var(--line-height-em);
  }

  .overlapping-element__image {
    margin-left: 0;
    margin-right: auto;
    width: auto;
    max-height: 250px;
    object-fit: scale-down;
  }


  .overlapping-element__text {
    width: 100%;
    padding-left: var(--line-height-em);
    padding-right: var(--line-height-em);
  }

  .overlapping-element__text::before {
    left: 0;
    width: 100px;
    height: calc(100% +  250px + 150px);     /* 100px jutting out above image wrapper */
    top: calc(-1.85714286em - 250px - 50px);   /* juts out 100px */
  }
}