.hero_2 {
  display: grid;
  position: relative;
}
.hero_2__img {
  grid-area: 1 / 1;
}
.hero_2__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay);
  max-width: 1280px;
}
.hero_2__img img {
  aspect-ratio: 16 / 9;
}
.hero_2__container {
  grid-area: 1 / 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  width: 100%;
  padding-bottom: 60px;
  z-index: 1;
}
.hero_2__intro_text {
  margin-bottom: 12px;
}
.hero_2__title {
  color: #fff;
  max-width: 700px;
}
.hero_2__content {
  color: #fff;
  max-width: 700px;
  margin-top: 8px;
}
.hero_2__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 4px; /* fix hove bug with show animation that uses clip-path */
}
.hero_2--full .hero_2__img img {
  width: 100%;
  max-height: 720px;
  object-fit: cover;
}
.hero_2--full .hero_2__img::after {
  max-width: unset;
}

@media(max-width: 1000px) {
  .hero_2__img {
    grid-area: unset;
  }
  .hero_2__img::after {
    content: unset;
  }
  .hero_2__container {
    grid-area: unset;
    padding-bottom: 0;
    padding-top: 24px;
  }
  .hero_2__title {
    color: unset;
  }
  .hero_2__content {
    color: unset;
    text-shadow: unset;
  }
}