.home-hero {
  position: relative;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 80rem);
  padding-top: 10rem;
  @media (min-width: 1024px) {
    padding-top: 7.5rem;
    min-height: 57.5rem;
  }
  
  & .home-hero__bg-typo {
    width: 25.5rem;
    position: absolute;
    top: -2.75rem;
    left: -3.3125rem;
    opacity: 5%;
    @media (min-width: 768px) {
      width: 80.1875%;
      top: 0;
      right: 0;
      left: auto;
      transform: translate(-2.331002331% ,-6.8787618229%);
    }
    @media (min-width: 1024px) {
      opacity: 20%;
    }
  }
  
  & .home-hero__main-typo {
    width: 10.1875rem;
    position: absolute;
    top: 6.875rem;
    right: 0;
    & img {
      width: 100%;
    }
    & img:last-child {
      display: none;
    }
    @media (min-width: 768px) {
      width: 15rem;
      top: 7.5rem;
      right: 2.5rem;
    }
    @media (min-width: 1024px) {
      width: 21.25rem;
      right: 5rem;
      & img:first-child {
        display: none;
      }
      & img:last-child {
        display: block;
      }
    }
    @media (min-width: 1200px) {
      right: 6.875rem;
    }
  }
  
  & .home-hero__sub-typo {
    width: 15rem;
    @media (min-width: 768px) {
      width: 30rem;
    }
    @media (min-width: 1024px) {
      width: 35rem;
    }
    @media (min-width: 1200px) {
      width: 40rem;
    }
  }
  
  & .home-hero__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 67.5rem;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(60, 60, 60, 0.68) 40.87%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(60, 60, 60, 0.68) 40.87%, #000 100%);
    @media (min-width: 768px) {
        display: none;
      }
    @media (min-width: 1024px) {
      margin-top: -7.5rem;
      opacity: 70%;
      mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.80) 48.56%, rgba(0, 0, 0, 0.39) 72.12%, rgba(0, 0, 0, 0.00) 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.80) 48.56%, rgba(0, 0, 0, 0.39) 72.12%, rgba(0, 0, 0, 0.00) 100%);
    }
    &.home-hero__image--wide {
      display: none;
      @media (min-width: 768px) {
        display: block;
      }
    }
  }
  
  & .home-hero__text {
    position: absolute;
    bottom: 0.625rem;
    left: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    line-height: 1.15;
    font-weight: 800;
    font-size: 1rem;
    & p {
      padding: 0.625rem;
      &:last-child {
        margin-left: 1.25rem;
        @media (min-width: 768px) {
          margin-left: 2.5rem;
        }
        @media (min-width: 1024px) {
          margin-left: 3.75rem;
        }
      }
    }
    @media (min-width: 768px) {
      right: 2.5rem;
      bottom: 2.5rem;
      left: auto;
      font-size: 1.5rem;
    }
    @media (min-width: 1024px) {
      font-size: 2rem;
    }
    @media (min-width: 1200px) {
      right: 12.5rem;
    }
  }
}

.bg-diagonal-line--home-intro {
  --line-deg: 20deg; 
}

.home-intoro-typo {
  width: 5rem;
  @media (min-width: 768px) {
    width: 6.5rem;
  }
  @media (min-width: 1024px) {
    width: 8rem;
  }
}

.home-business-content {
  writing-mode: vertical-rl;
  & p, & h2, & h3 {
    flex-shrink: 0;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}

.home-business-image {
  width: 100%;
  height: 25rem;
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  @media (min-width: 768px) {
    height: 30rem;
  }
  @media (min-width: 1024px) {
    height: auto;
  }
}

.home-strength-title {
  display: flex;
  flex-direction: column;
  margin-top: -3.75rem;
  margin-right: auto;
  line-height: 1.15;
  color: var(--snow);
  font-size: 1.5rem;
  & p {
    background-color: var(--ink);
    padding: 0.5rem;
    margin-right: auto;
    &:last-child {
      margin-top: -0.25rem;
    }
  }
  @media (min-width: 1200px) {
    font-size: 1.75rem;
  }
}

.home-recruit-typo {
  position: relative;
  width: 100%;
  max-width: 62rem;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
    margin-top: -5rem;
    margin-bottom: 2rem;
  }
  @media (min-width: 1024px) {
    margin-top: -6rem;
  }
}