.text-image--square-50 > div {
  position: relative;
  background: 0 0
}
.text-image--square-50 > div::before {
  content: "";
  background: var(--base-4);
  position: absolute;
  height: 30%;
  width: 100%;
  top: 0
}
.text-image--square-50 .config-text .color-display {
  color: var(--primary-1)
}
.text-image--square-50 .config-text .color-section {
  color: var(--primary-1)
}
.text-image--square-50 .config-text .rte {
  color: var(--base-1)
}
.text-image--square-50 .config-text .rte * {
  color: var(--base-1)
}
.text-image--square-50 .config-text__cta-wrapper {
  margin-top: var(--sm-1)
}
.text-image--square-50 .config-text__cta-wrapper .cta--primary {
  background-color: var(--primary-5);
  color: var(--primary-1);
  min-width: 14.8rem
}
.text-image--square-50 .config-text__cta-wrapper .cta--primary:hover {
  background-color: var(--primary-4)
}
@media (min-width:768px) {
  .text-image__image {
    min-height: 48.4rem
  }
}
@media (min-width:992px) {
  .text-image > div::before {
    width: 70%;
    height: 100%;
    top: 0
  }
  .text-image--left-square-50 > div::before {
    left: 0
  }
  .text-image--right-square-50 > div::before {
    right: 0
  }
}