.main-hero {
  padding-top: 6.9444444444vw;
}
.main-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  z-index: 5;
}
.main-hero__title {
  color: var(--blue);
  text-align: center;
  font-size: 2.7777777778vw;
  font-weight: 700;
  line-height: 122.5%;
  letter-spacing: -0.0833333333vw;
  text-transform: uppercase;
}
.main-hero__description {
  margin-top: -1.3194444444vw;
  color: var(--black);
  text-align: center;
  font-size: 0.8333333333vw;
  font-weight: 400;
  line-height: 1.0416666667vw;
  letter-spacing: -0.0333333333vw;
}
.main-hero__btn {
  margin-top: 1.5972222222vw;
}
.main-hero__text-image {
  display: block;
  position: relative;
  margin-top: -9.1666666667vw;
  width: 100%;
  height: auto;
  z-index: 1;
}
.main-hero__main-image {
  margin-top: -2.2222222222vw;
  width: 100%;
  height: auto;
  z-index: 2;
}
.main-hero__hits {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-top: 0.6944444444vw;
  padding: 0 var(--side-padding);
  gap: 0.6944444444vw;
}
.main-hero__hit {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 1.3888888889vw 2.7777777778vw;
  gap: 0.6944444444vw;
  border-radius: 5.5555555556vw;
  background: var(--grey);
  transition: 0.3s all ease-in-out;
}
.main-hero__hit.active, .main-hero__hit:hover {
  background: var(--light-blue);
}
.main-hero__hit-icon {
  display: block;
  width: 2.5vw;
  height: auto;
}
.main-hero__hit-text {
  display: flex;
  flex-direction: column;
  gap: 0.2777777778vw;
}
.main-hero__hit-heading {
  color: var(--black);
  font-size: 1.6666666667vw;
  font-weight: 500;
  line-height: 1.7361111111vw;
  letter-spacing: -0.05vw;
}
.main-hero__hit-description {
  color: var(--black);
  font-size: 1.1111111111vw;
  font-weight: 400;
  line-height: 1.3888888889vw;
  letter-spacing: -0.0222222222vw;
}

@media (prefers-reduced-motion: no-preference) {
  .main-hero__title,
  .main-hero__description,
  .main-hero__btn,
  .main-hero__text-image,
  .main-hero:not(.is-counted) .main-hero__hit-heading span {
    opacity: 0;
  }
  .main-hero.is-in .main-hero__title,
  .main-hero.is-in .main-hero__description {
    animation: main-hero-rise 0.8s ease forwards;
  }
  .main-hero.is-in .main-hero__btn {
    animation: main-hero-rise 0.65s ease 0.7s forwards;
  }
  .main-hero.is-in .main-hero__text-image {
    animation: main-hero-fade 1.8s ease 1.35s forwards;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .main-hero.is-counted .main-hero__hit-heading span {
    opacity: 1;
  }
}
@media (scripting: none) {
  .main-hero__title,
  .main-hero__description,
  .main-hero__btn,
  .main-hero__text-image,
  .main-hero__hit-heading span {
    opacity: 1;
  }
}
.main-hero__hit-heading span {
  font-variant-numeric: tabular-nums;
}

@keyframes main-hero-rise {
  from {
    opacity: 0;
    transform: translateY(1.1111111111vw);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes main-hero-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}