.hero {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 800px;
  position: relative;
  overflow: hidden;

  background: url(../images/yujeong-huh-PnO5Uh6Ms8M-unsplash.jpg) center;
  background-size: cover;
  background-repeat: no-repeat;

  @media (max-width: 1024px) {
    /* height: 600px; */
  }
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
.hero-text {
  padding: 40px 20px 0px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  max-width: 1240px;
  position: relative;
  z-index: 2;

  color: var(--color-neutral-50);
  text-align: left;

  @media (min-width: 768px) {
    & span {
      display: block;
    }
  }
}
.hero-subtext {
  color: var(--color-neutral-100);
  font-size: var(--font-size-desktop-heading-4);
  line-height: var(--lineheight-desktop-heading-4);
  font-weight: var(--font-weight-bold);
  position: relative;
  align-self: stretch;
  @media (max-width: 1024px) {
    font-size: var(--font-size-mobile-heading-4);
    line-height: var(--lineheight-mobile-heading-4);
  }
}
.hero-headline {
  font-size: var(--font-size-desktop-display-3);
  line-height: var(--lineheight-desktop-display-3);
  font-weight: var(--font-weight-semibold);
  position: relative;
  align-self: stretch;
  @media (max-width: 1024px) {
    font-size: var(--font-size-mobile-heading-1);
    line-height: var(--lineheight-mobile-heading-1);
  }
  word-break: keep-all;
}
.hero-description {
  color: var(--color-neutral-100);
  font-size: var(--font-size-desktop-body-l);
  line-height: var(--lineheight-desktop-body-l);
  font-weight: var(--font-weight-regular);
  position: relative;
  align-self: stretch;
  word-break: keep-all;
  @media (max-width: 1024px) {
    font-size: var(--font-size-mobile-body-l);
    line-height: var(--lineheight-mobile-body-l);
  }
}