.image-with-text-section {
  word-break: break-word;
}

.image-with-text-section__inner {
  width: 100%;
  background-color: rgb(var(--color-background));
}
.image-with-text__image {
  position: relative;
  display: flex;
  max-width: 100%;
}

.image-with-text__image:not(.image-with-text__image--original-ratio) {
  height: 296px;
}
.image-with-text__image > img {
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio);
  object-fit: cover;
}

.image-with-text__image--original-ratio {
  height: auto;
}

.image-with-text__image--original-ratio > img,
.image-with-text__image--original-ratio .hover-scale__image {
  width: 100%;
  height: auto;
  aspect-ratio: var(--aspect-ratio, auto);
  object-fit: contain;
}
.image-with-text__image .hover-scale__image {
  width: 100%;
}
.image-with-text__image .empty-image-class {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-image-background));
}
.image-with-text__subheading {
  font-size: var(--body3-font-size);
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
.image-with-text__heading {
  max-width: 400px;
}
.image-with-text__rich-text {
  padding-top: 20px;
  padding-bottom: 20px;
}
.image-with-text__button {
  max-width: 100%;
  padding-block-start: 0;
}
.image-with-text__button .button {
  word-break: break-all;
  white-space: normal;
}

.image-with-text-section--page-width-split .page-width {
  margin-inline: auto;
}

.image-with-text-section--page-width-split .image-with-text__image,
.image-with-text-section--page-width-split .image-with-text__group {
  flex: 0 0 calc(50% - (var(--s-column-gap, 80px) / 2));
  max-width: calc(50% - (var(--s-column-gap, 80px) / 2));
}

@media (min-width: 960px) {
  .image-with-text-section--image-right .image-with-text__image {
    order: 2;
  }

  .image-with-text-section--image-right .image-with-text__group {
    order: 1;
  }
}

@media screen and (min-width: 750px) {
  .image-with-text__image:not(.image-with-text__image--original-ratio) {
    height: 460px;
  }
}

@media (max-width: 959px) {
  .image-with-text-section--page-width-split .image-with-text__image,
  .image-with-text-section--page-width-split .image-with-text__group {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
