.text-image .text-image-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.text-image .text-image-container.row-reverse {
  flex-direction: row-reverse;
}
.text-image .img-container {
  width: 54.27em;
  width: clamp(30em, 65vw, 54.27em);
  aspect-ratio: 1.87/1;
}
.text-image .img-container img {
  width: 100%;
  height: 100%;
}
.text-image .text-container {
  width: 100%;
}
.text-image .text-wrap {
  width: 50%;
  margin-left: auto;
  margin-right: 0;
  background-color: var(--footer-black);
  color: #fff;
  padding: 3em;
  padding: clamp(1em, 3.5vw, 3em);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  transform: translate(0%, -35%);
}
.text-image .text-wrap.left-side {
  margin-left: 0;
  margin-right: auto;
}

@media (min-width: 651px) and (max-width: 1000px) {
  .text-image .text-wrap {
    transform: translate(0%, -20%);
  }
}
@media (max-width: 650px) {
  .text-image {
    margin-block: auto;
  }
  .text-image .container-medium {
    width: 100%;
  }
  .text-image .img-container {
    width: 100%;
    aspect-ratio: 1;
  }
  .text-image .img-container img {
    width: 100%;
    height: 100%;
  }
  .text-image .text-wrap {
    width: 95%;
    margin-inline: auto;
    transform: translate(0%, -10%);
    -webkit-mask: var(--mask-both);
    mask: var(--mask-both);
  }
  .text-image .text-wrap.left-side {
    margin-inline: auto;
  }
}