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

.overlapping-element__image-wrapper {
    max-width: 500px;
}

.overlapping-element__text {
  max-width: 50em;
  padding-right: var(--line-height-em);
}


.overlapping-element__text-bg {
  width: 90%;
  margin: var(--line-height-em) 0 0 auto;
}

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

  .overlapping-element__image-wrapper {
    width: 100%;
    margin-right: 0;
    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-bg {
    margin-left: 0;
  }

  .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 */
  }
}