.text-and-image {
  display: block;
  text-decoration: none;
}
.text-and-image,
.text-and-image * {
  box-sizing: border-box;
}
.text-and-image > .wrap {
  display: flex;
  flex-flow: row nowrap;
  position: relative;
}
.text-and-image .text-column {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 50%;
  padding: 80px 135px;
  color: var(--text);
}
.text-and-image .text-column .content {
  max-width: 450px;
  width: 100%;
}
.text-and-image .text-column .content .icon {
  display: block;
  height: 65px;
  margin: 0 0 35px;
}
.text-and-image .text-column .content .icon .svg-icon,
.text-and-image .text-column .content .icon .svg-icon svg {
  height: 100%;
}
.text-and-image .text-column .content .icon img {
  display: block;
  height: 100%;
  width: auto;
}
.text-and-image .text-column .content .title {
  font-size: 35px;
}
.text-and-image .image-column {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 100%;
  width: calc(50% + 175px);
}
.text-and-image .image-column .background-image {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: transparent url("../../img/spacer.gif") center center no-repeat;
  background-size: cover;
}
.text-and-image .background-video,
.text-and-image .background-lottie,
.text-and-image .background-webm {
  width: 50%;
  height: 100%;
  align-self: center;
  padding: 0 1em;
}
.text-and-image .background-video iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: 100%;
}
.text-and-image .background-webm {
  text-align: center;
}
.text-and-image .background-webm video {
  max-width: 100%;
  height: 100%;
  max-height: 500px;
  width: 100%;
}
.text-and-image .background-lottie {
  height: 500px;
}
.text-and-image.no-overlap .image-column {
  width: 49%;
}
.text-and-image.no-overlap .image-column .background-image {
  background-size: contain;
}
@media screen and (max-width: 1400px) {
  .text-and-image .text-column {
    padding: 100px 50px;
  }
}
@media screen and (max-width: 900px) {
  .text-and-image > .wrap {
    flex-flow: column wrap;
    padding: 16px;
  }
  .text-and-image .text-column {
    width: 100%;
    padding: 40px 35px;
  }
  .text-and-image .text-column .content {
    max-width: 100%;
  }
  .text-and-image .image-column {
    position: relative;
    height: 0;
    width: 100%;
    padding: 0 0 65%;
  }
  .text-and-image .background-video,
  .text-and-image .background-lottie,
  .text-and-image .background-webm {
    width: 100%;
    padding: 0;
  }
  .text-and-image.no-overlap .image-column {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .text-and-image .image-column .background-image .play-button {
    height: 80px;
    width: 80px;
    margin: -40px 0 0 -40px;
  }
}
@media screen and (max-width: 400px) {
  .text-and-image > .wrap {
    flex-flow: column wrap;
    padding: 20px;
  }
  .text-and-image .text-column {
    width: 100%;
    padding: 30px 20px;
  }
  .text-and-image .text-column .content {
    max-width: 100%;
  }
  .text-and-image .image-column {
    position: relative;
    height: 0;
    width: 100%;
    padding: 0 0 65%;
  }
}