/* ---- Image with text overlay ---- */

.image__overlay-section .overlay {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--overlay-color);
}

.image__overlay-section .image__overlay-caption {
  position: absolute;
  width: fit-content;
  width: -moz-fit-content;
}

.image__overlay-btn-wrapper {
  display: inline-block;
}

.image__overlay-section .image__overlay-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 0;
  position: relative;
  height: var(--height);
  overflow: hidden;
}

.image__overlay-section .onboard {
  text-align: center;
}

.image__overlay-section .onboard svg {
  fill: #d0d0d0;
  height: var(--height);
}

.image__overlay-section.is-fixed_height .image__overlay-container {
  background-image: var(--background-image);
}
@media screen and (min-width: 981px) {
  .image__overlay-section.is-fixed_height .image__overlay-container {
    background-attachment: fixed;
  }
}

.image__overlay-section .image__overlay-caption {
  text-align: var(--text-align);
  top: var(--caption-vertical);
  left: var(--caption-horizontal);
  -webkit-transform: translate(calc(var(--caption-horizontal) * -1), calc(var(--caption-vertical) * -1));
  -ms-transform: translate(calc(var(--caption-horizontal) * -1), calc(var(--caption-vertical) * -1));
  -moz-transform: translate(calc(var(--caption-horizontal) * -1), calc(var(--caption-vertical) * -1));
  -o-transform: translate(calc(var(--caption-horizontal) * -1), calc(var(--caption-vertical) * -1));
  transform: translate(calc(var(--caption-horizontal) * -1), calc(var(--caption-vertical) * -1));
}

.image__overlay-section .image__overlay-container {
  height: var(--height);
}
.image__overlay-section .box-ratio {
  padding-bottom: var(--height) !important;
}
.image__overlay-section .box-ratio img {
  height: var(--height);
  object-fit: cover;
}
.image__overlay-section .image__overlay-caption h3 {
  color: var(--text-color);
}
.image__overlay-section .image__overlay-caption p {
  font-size: var(--font-size);
  color: var(--text-color);
}
.image__overlay-section .image__overlay-caption .rte a:not(.btn) {
  color: var(--text-color);
}
.no-js .image__overlay-section .image__overlay-container {
  background-image: var(--background-image);
  opacity: 1;
}
@media screen and (max-width: 740px) {
  .image__overlay-section .image__overlay-container,
  .image__overlay-section .box-ratio img{
    height: var(--mobile-height);
  }
  .image__overlay-section .box-ratio {
    padding-bottom: var(--mobile-height) !important;
  }
  .image__overlay-section .image__overlay-caption h3 {
    font-size: calc(var(--h3-size) - (var(--h3-size) * 0.15))
  }
  .image__overlay-section .image__overlay-caption p {
    font-size: calc(var(--font-size) - (var(--font-size) * 0.15))
  }
}