.text_media {
  --text-media-spacer: 4rem;
  --text-media-offset: 25px;

  .col {
    padding-left: 0;
    padding-right: 0;
  }

  .media-image {
    width: 100%;

    img {
      width: 100%;
      display: block;
    }
  }
}

@media (min-width: 768px) {
  .text_media {
    .col {
      padding-left: var(--text-media-spacer);
      padding-right: var(--text-media-spacer);
    }
  }

  .text_media.variant-text_media {
    .col-text {
      padding-right: calc(var(--text-media-spacer) + var(--text-media-offset));
    }

    .col-media {
      padding-left: calc(var(--text-media-spacer) + var(--text-media-offset));
    }
  }

  .text_media.variant-media_text {
    .col-text {
      padding-left: calc(var(--text-media-spacer) + var(--text-media-offset));
    }

    .col-media {
      padding-right: calc(var(--text-media-spacer) + var(--text-media-offset));
    }
  }
}