.hero__wrapper {
  position: relative;
}

.hero__bg {
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 50%, transparent calc(100% - 50px));
}

.hero__bg--with-mask {
  mask-image: linear-gradient(to bottom, transparent 0, rgb(0, 0, 0) 50%, transparent calc(100% - 50px));
}

@media (min-width: 1200px) {
  .hero__bg {
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 50%, transparent calc(100% - 70px));
  }

  .hero__bg--with-mask {
    mask-image: linear-gradient(to bottom, transparent 0, rgb(0, 0, 0) 50%, transparent calc(100% - 70px));
  }
}

.hero__bg--home {
  /*mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 50%, transparent calc(100% - 60px));*/
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0, 20%) calc(100% - 10dvh - 20px - 60px), transparent calc(100% - 10dvh - 20px - 34px), transparent calc(100% - 10dvh - 20px), rgb(0, 0, 0, 20%) 100%);
}

@media (min-width: 768px) {
  .hero__bg--home {
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 50%, transparent calc(100% - 74px));
  }
}

@media (min-width: 1200px) {
  .hero__bg--home {
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) 50%, transparent calc(100% - 125px));
  }
}

.hero__content {
  position: relative;
  padding: 100px 0 20px;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

@media (min-width: 768px) {
  .hero__content {
    padding: 115px 0 40px;
  }
}

@media (min-width: 1200px) {
  .hero__content {
    padding: 100px 0 60px;
  }
}

.hero__collections {
  display: none;
}

@media (min-width: 768px) {
  .hero__collections {
    padding-bottom: 40px;
    display: flex;
  }
}

@media (min-width: 1200px) {
  .hero__collections {
    padding-bottom: 35px;
  }
}

.hero__bg-text-wrapper {
  height: 0;
}

.hero__bg-text {
  margin: 0 auto;
  display: block;
  width: 100%;
  height: auto;
}

.hero__main {
  position: relative;
  display: flex;
  flex: 1 0 auto;
}

.hero__main-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero.active .hero__main-wrapper {
  z-index: 2;
}

.hero__image-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__image-wrapper {
  padding-bottom: 18dvh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  translate: -50%;
}

@media (min-width: 1200px) {
  .hero__image-wrapper {
    padding-bottom: 10dvh;
  }
}

.hero--home .hero__image-wrapper {
  padding-bottom: 10dvh;
  /*padding: 0;*/
  width: 130%;
}

/*@media (min-width: 768px) {*/
/*  .hero--home .hero__image-wrapper {*/
/*    padding-bottom: 0;*/
/*  }*/
/*}*/

@media (min-width: 1200px) {
  .hero--home .hero__image-wrapper {
    width: 100%;
  }
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  object-position: bottom;
  filter: drop-shadow(0 0 12px black);
}

.hero--home .hero__image {
  object-fit: contain;
  filter: none;
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - 60px), transparent calc(100% - 34px));
}

.hero--home .hero__image--desktop {
  display: none;
}

@media (min-width: 768px) {
  .hero--home .hero__image {
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - 100px), transparent calc(100% - 34px));
  }

  .hero--home .hero__image--mobile {
    display: none;
  }

  .hero--home .hero__image--desktop {
    display: block;
  }
}

@media (min-width: 1200px) {
  .hero--home .hero__image {
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0) 0, rgb(0, 0, 0) calc(100% - 100px), transparent calc(100% - 30px));
  }
}

.hero__footer-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.hero--home .hero__footer-wrapper {
  bottom: 15px;
}

@media (min-width: 768px) {
  .hero--home .hero__footer-wrapper {
    bottom: 0;
  }
}

.hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 30px;
}

.hero__footer:has(.hero__buttons:empty) .hero__text-wrapper,
.hero__footer:has(.hero__buttons:empty) .hero__social-icons-wrapper {
  display: flex;
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 768px) {
  .hero__footer {
    flex-wrap: nowrap;
  }
}

.hero__text-wrapper,
.hero__social-icons-wrapper {
  display: none;
}

@media (min-width: 768px) {
  .hero__text-wrapper,
  .hero__social-icons-wrapper {
    display: block;
    flex: 0 0 25%;
    max-width: 25%;
  }
}

.hero__buttons {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 0 0 100%;
}

.hero__buttons:empty {
  display: none;
}

@media (min-width: 768px) {
  .hero__buttons {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.hero__special-icon {
  position: absolute;
  bottom: 110%;
  left: 50%;
  translate: -50%;
}

@media (min-width: 768px) {
  .hero__footer:has(.hero__buttons:empty) .hero__special-icon {
    bottom: 50%;
    translate: -50% 50%;
  }
}

.hero__special-icon img {
  display: block;
}

.hero__social-icons {
  margin-left: auto;
  gap: 8px;
  justify-content: flex-end;
}

.hero__social-icons .social-icons__border {
  width: 24px;
}

@media (min-width: 1200px) {
  .hero__social-icons {
    gap: 10px;
  }

  .hero__social-icons .social-icons__border {
    width: 30px;
  }
}