.block-text-image {
  display: flex;
   flex-wrap: wrap;        /* Responsive, recommended */
  /* align-items: stretch;  Default, only specify if you override */
  /* margin-bottom: 2.5rem; Remove, use utility classes */
}
.block-text-image--content,
.block-text-image--img {
  width: 50%;        /* Each takes half of the row */
  box-sizing: border-box;
}
.block-text-image--img img {
  width: 100%;       /* The image fills its parent div’s width */
  height: auto;
  display: block;
}
@media (max-width: 800px) {
  .block-text-image {
    flex-direction: column;
  }
  .block-text-image--content,
  .block-text-image--img {
    width: 100%;
  }
}