.landing-hero {
  --scroll-progress: 0;
  padding-bottom: 136px;
  
  @media (max-width: 989px) {
    padding-bottom: 68px;
  }
  
  @media (max-width: 767px) {
    padding-bottom: 34px;
  }
}

.landing-hero__inner {
  background: linear-gradient(var(--background-color), var(--background-color));
  background-position-y: calc(-81px * var(--scroll-progress));
  background-repeat: no-repeat;
  padding-block: 80px 0;
  padding-inline: 80px;
  overflow-x: clip;
  
  @media (max-width: 1279px) {
    padding-block: 46px 0;
    padding-inline: 16px;
  }

  @media (max-width: 989px) {
    background-position-y: -31px;
  }
}

.landing-hero__head {
  text-align: center;

  @media (max-width: 767px) {
    max-width: 290px;
    margin-inline: auto;
  }
}

.landing-hero__title {
  font-family: var(--font-stack-body-primary);
  font-size: 80px;
  line-height: 1;
  margin-bottom: 0;

  @media (max-width: 989px) {
    font-size: 56px;
  }
}

.landing-hero__content {
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 0;

  @media (max-width: 989px) {
    font-size: 18px;
  }
}

.landing-hero__content:not(:first-child) {
  margin-top: 8px;
}

.landing-hero__body {
  position: relative;
  isolation: isolate;
}

.landing-hero__body:not(:first-child) {
  margin-top: 4.8rem;

  @media (max-width: 1279px) {
    margin-top: 40px;
  }
}

.landing-hero__left,
.landing-hero__right {
  line-height: 0;
  width: 240px;
  height: auto;

  @media (max-width: 989px) {
    width: 17.066vw;
  }

  img {
    width: 100%;
    height: auto;
  }
}

.landing-hero__left,
.landing-hero__right,
.landing-hero__blocks {
  min-width: 0;
}

.landing-hero__left {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;

  @media (max-width: 1279px) {
    left: -40px;
  }
 
  @media (max-width: 989px) {
    left: 0;
  }
}

.landing-hero__right {
  position: absolute;
  top: 26.25%;
  right: 0;
  z-index: 5;

  @media (max-width: 1279px) {
    right: -40px;
  }

  @media (max-width: 989px) {
    top: 27.643%;
    right: 0;
  }
}

.landing-hero__blocks {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  padding-top: 25px;
  padding-inline: 86px;

  @media (max-width: 1279px) {
    padding-inline: 46px;
  }

  @media (max-width: 989px) {
    padding-inline: 66px;
  }

  @media (max-width: 767px) {
    padding-top: 7px;
    padding-inline: 41px;
  }
}

.landing-hero__block {
  --negative-gap: 13px;
  width: calc(100% + var(--negative-gap));
  aspect-ratio: 260.77/369.42;
  border-radius: 8px;
  position: relative;
  overflow: hidden;

  @media (max-width: 767px) {
    --negative-gap: 3px;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.landing-hero__block:not(:first-child) {
  margin-left: calc(-1 * var(--negative-gap));
}

.landing-hero__block:nth-child(1) {
  z-index: 4;
  transform: translate3d(0, min(calc(78px + calc(25px * var(--scroll-progress) * 2)), 103px), 0);
  
  @media (max-width: 989px) {
    transform: translate3d(0, 39px, 0);
  }
  
  @media (max-width: 767px) {
    transform: translate3d(0, 21px, 0);
  }
}

.landing-hero__block:nth-child(2) {
  z-index: 3;
  transform: translate3d(0, min(calc(136px - calc(96px * var(--scroll-progress) * 2)), 232px), 0);

  @media (max-width: 989px) {
    transform: translate3d(0, 68px, 0);
  }
 
  @media (max-width: 767px) {
    transform: translate3d(0, 37px, 0);
  }
}

.landing-hero__block:nth-child(3) {
  z-index: 2;
  transform: translate3d(0, min(calc(25px + calc(144px * var(--scroll-progress) * 2)), 169px), 0);

  @media (max-width: 989px) {
    transform: translate3d(0, 12px, 0);
  }
   
  @media (max-width: 767px) {
    transform: translate3d(0, 6px, 0);
  }
}

.landing-hero__block:nth-child(4) {
  z-index: 1;
  transform: translate3d(0, min(calc(78px - calc(25px * var(--scroll-progress) * 2)), 103px), 0);

  @media (max-width: 989px) {
    transform: translate3d(0, 39px, 0);
  }

  @media (max-width: 767px) {
    transform: translate3d(0, 21px, 0);
  }
}