.home-hero__heading {
  font-size: 19.5vw;
  font-family: var(--heading-font-family);
  align-items: justify;
  letter-spacing: -.55vw;
  color: var(--text-color);
  margin: 1rem 0;
  font-weight: 100;
  line-height: 1.125;

  @media screen and (width >= 768px) {
    & {
      margin: 2.5rem 0;
      font-size: 10.875vw;
    }
  }
}

.home-hero__sub_heading {
  opacity: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 2.5rem 0;
  animation: 1s cubic-bezier(.22, 1, .36, 1) .85s forwards home-hero-line-in;
  display: flex;

  @media screen and (width >= 768px) {
    & {
      align-items: top;
      flex-direction: row;
      gap: 0;
      margin: 5.5rem 0 4rem;
    }
  }
}

.home-hero__sub_heading a {
  align-self: flex-start;
  min-width: 150px;
  margin-left: 0;

  @media screen and (width >= 768px) {
    & {
      align-self: auto;
      margin-left: auto;
    }
  }
}

.home-hero__sub_heading h2 {
  font-family: var(--body-font-family);
  color: var(--text-color);
  margin: 0;
  padding-right: 0;
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 200;
  line-height: 1.25;

  @media screen and (width >= 768px) {
    & {
      max-width: 65%;
      padding-right: 15%;
    }
  }
}

.home-hero__sub_heading br {
  @media screen and (width <= 1125px) {
    & {
      display: none;
    }
  }
}

.home-hero__heading-line {
  align-items: center;
  display: flex;
}

.home-hero__heading-text {
  opacity: 0;
  animation: 1.15s cubic-bezier(.22, 1, .36, 1) forwards home-hero-line-in;
  transform: translateY(.35em);
}

.home-hero__desktop .home-hero__heading-line--1 .home-hero__heading-text {
  animation-delay: .12s;
}

.home-hero__desktop .home-hero__heading-line--2 .home-hero__heading-text {
  animation-delay: .36s;
}

.home-hero__desktop .home-hero__heading-line--3 .home-hero__heading-text {
  animation-delay: .6s;
}

.home-hero__mobile .home-hero__heading-line--1 .home-hero__heading-text {
  animation-delay: .1s;
}

.home-hero__mobile .home-hero__heading-line--2 .home-hero__heading-text {
  animation-delay: .22s;
}

.home-hero__mobile .home-hero__heading-line--3 .home-hero__heading-text {
  animation-delay: .34s;
}

.home-hero__mobile .home-hero__heading-line--4 .home-hero__heading-text {
  animation-delay: .46s;
}

.home-hero__mobile .home-hero__heading-line--5 .home-hero__heading-text {
  animation-delay: .58s;
}

.home-hero__mobile .home-hero__heading-line--6 .home-hero__heading-text {
  animation-delay: .7s;
}

@keyframes home-hero-line-in {
  from {
    opacity: 0;
    transform: translateY(.35em);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__heading-text, .home-hero__sub_heading {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

.home-hero__desktop {
  display: none;

  @media screen and (width >= 767px) {
    & {
      display: block;
    }
  }
}

.home-hero__desktop .home-hero__heading-line--1 .image-wrapper {
  width: 19vw;
  height: 12vw;
  margin-left: 5rem;
}

.home-hero__desktop .home-hero__heading-line--1 .image-wrapper img {
  object-position: top center;
}

.home-hero__desktop .home-hero__heading-line--2 .image-wrapper {
  justify-content: start;
  width: 12vw;
  height: 12vw;
  margin-right: auto;
}

.home-hero__desktop .home-hero__heading-line--3 .image-wrapper {
  width: 14vw;
  height: 12vw;
}

.home-hero__mobile {
  @media screen and (width >= 767px) {
    & {
      display: none;
    }
  }
}

.home-hero__mobile .home-hero__heading-line--2 .image-wrapper__1 {
  width: 50vw;
  height: 18vw;
  margin-left: 1rem;
}

.home-hero__mobile .home-hero__heading-line--2 .image-wrapper__2 {
  width: 80vw;
  height: 18vw;
  margin-left: 1rem;
}

.home-hero__mobile .home-hero__heading-line--2 .image-wrapper__3 {
  width: 50vw;
  height: 18vw;
  margin-left: 1rem;
}

.home-hero__mobile .home-hero__heading-line--3 .image-wrapper__1 {
  width: 30vw;
  height: 20vw;
  margin-right: auto;
}

.home-hero__mobile .home-hero__heading-line--4 .image-wrapper__1 {
  width: 17vw;
  height: 17vw;
  margin: 0 auto;
}

.home-hero__mobile .home-hero__heading-line--4 .image-wrapper__2 {
  width: 15vw;
  height: 17vw;
  margin-left: auto;
}

.home-hero__mobile .home-hero__heading-line--5 .image-wrapper__1 {
  width: 20vw;
  height: 20vw;
  margin-right: auto;
}

.home-hero__mobile .home-hero__heading-line--6 .image-wrapper__1 {
  width: 30vw;
  height: 20vw;
  margin-left: auto;
}
