.hero-wrapper {
  background: var(--trillium);
  position: relative;
  margin-bottom: 50px;
}

.hero-wrapper:after {
  content: "";
  background: var(--under-the-elms) url("/modules/custom/ohio_hero/images/map_2.svg") no-repeat right center;
  position: absolute;
  bottom: -50px;
  height: 50px;
  width: 100%;
  right: 0;
}

.hero {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.hero img {
  width: 100%;
  height:auto;
  align-self: center;
  transform: translate(0, 0);
}

.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;
  color: var(--under-the-elms);
}

/* 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;
  }
}

@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-text .field--name-field-caption-plain {
  margin: 15px 0;
  font-size: 24px;
}

.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: 0 0 30px;
  }

  .hero img {
    width: 50%;
    transform: translate(0, 30px);
  }

  .hero .hero-text {
    width: 50%;
    text-align: left;
  }

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

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

  .hero-wrapper:after {
    height: 100%;
    width: 35%;
    right: 0;
    bottom: 0;
  }
}

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