.hero-wrapper {
  background: var(--light-gray);
  position: relative;
}

.hero {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
}

.hero img {
  width: 100%;
  height:auto;
  align-self: center;
  transform: scale(1);
}

.hero-text {
  align-self: center;
  text-align: center;
  padding: 0 15px 30px;
  container-name: hero-text-container;
  container-type: normal;
}

@media (min-width: 768px) {
  .hero-text {
    container-type: inline-size;
  }
}

.hero-text .display-one {
  font-size: clamp(4rem, 4vw + 1.5rem, 6rem);
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* Safari-specific heading exceptions */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  .hero-text .display-one {
    word-wrap: unset;
    overflow-wrap: unset;
    hyphens: unset;
    -webkit-hyphens: unset;
  }
}

.hero-text .field--name-field-caption-plain {
  margin: 15px 0;
  font-size: 24px;
}

@media (min-width: 768px) {
  .hero-text .display-one {
    font-size: clamp(4rem, 3vw + 1.5rem, 6rem);
  }

  @container hero-text-container (min-width: 470px) {
    .hero-text .display-one {
      font-size: clamp(4rem, 4vw + 1.5rem, 6rem);
    }
  }
}

.hero .button {
  margin: 15px 0 40px;
}

@media (max-width: 992px) {
  .hero.container {
    width: 100%;
    max-width: none;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row-reverse;
    margin: 30px 0;
  }

  .hero img {
    width: 50%;
    transform: scale(1.1);
  }

  .hero .hero-text {
    width: 50%;
    padding: 30px;
    margin-right: 30px;
    text-align: left;
  }

  .hero-text .field--name-field-caption-plain {
    margin: 15px 0 0;
  }

  .hero .button {
    margin-top: 40px;
  }
}

@media (min-width: 992px) {
  .hero .hero-text {
    padding: 30px 30px 30px 0;
  }
}