.Hero {
  position: relative;
  margin: 2rem auto 9rem;
  max-width: var(--sizeContentFullHd);
  border-radius: var(--sizeButtonBorderRadius);
}

@media (max-width: 37.5rem) {
  .Hero {
    margin-bottom: 5rem;
  }
}

.Hero:has(.HeroProduct) {
  margin-bottom: calc(1.5 * var(--sizeModuleHorizontalOffset));
}

.Hero-slider {
  position: relative;
}

.Hero-swiper {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

.Hero-products {
  position: absolute;
  inset: auto 185px -80px auto;
  display: flex;
  flex-direction: column;
  width: 330px;
}

@media (max-width: 80rem) {
  .Hero-products {
    inset: auto 120px -80px auto;
    width: 360px;
  }
}

@media (max-width: 37.5rem) {
  .Hero-products {
    inset: calc(100% - 2rem) 5rem auto 0.5rem;
    width: auto;
  }
}

.Hero-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition-property: transform;
  transform: translate3d(0, 0, 0);
}

.Hero:has(.HeroItem:only-child) .Hero-nav {
  display: none;
}

.Hero-nav {
  user-select: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 37.5rem) {
  .Hero-nav {
    gap: 1rem;
    margin-top: 1.5rem;
  }
}

.Hero-navButton {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.Hero-navButton svg {
  transition: var(--animationBase);
}

.Hero-navButton:hover, .Hero-navButton:active, .Hero-navButton:focus {
  color: var(--colorBrand);
}

/*# sourceMappingURL=hero.min.css.map */