.hero {
  --height: 60vh;
  position: relative;
  height: var(--height);
  width: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-light);
  overflow: hidden;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
}

.hero__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  gap: var(--space-l);
  font-family: var(--font-family);
  font-size: var(--font-base);
}

.hero__title {
  font-size: var(--font-size-xl);
  margin: 0;
  line-height: 80px;
  color: var(--color-dark);
}

.hero__subtitle {
  font-size: var(--font-size-lg);
  margin: 0;
  color: var(--color-light);
  line-height: 2rem;
}

.hero__title,
.hero__subtitle {
    -webkit-hyphens: auto;
       -ms-hyphens: auto;
           hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
 }
 
 
@media only screen and (min-width: 768px) {
  .hero__title {
    -webkit-hyphens: none;
       -ms-hyphens: none;
           hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }
}