.hero-module {
  width: 100%;
  /* height: calc(100vh - 54px); */
  background-color: #fff;
  overflow: hidden;
  position: relative;
}

.hero-wrapper {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 1024px) {

.hero-wrapper {
  display: block;
}
}

.hero-module__violet-bar {
  position: absolute;
  background-color: var(--violet-4);
  bottom: 0;
  width: 100%;
  height: 20px;
  z-index: 10;
}

@media (min-width: 1024px) {
  .hero-module {
    background-color: var(--violet-4);
  }
}

.hero-module__image {
  position: absolute;
  z-index: 1;
  width: 210%;
  bottom: 0;
  right: 0;
}

@media (min-width: 768px) {
  .hero-module__image {
    width: 140%;
  }
}

@media (min-width: 1024px) {
  .hero-module__image {
    width: 105%;
  }
}

.hero-module__overlay-image {
  position: absolute;
  z-index: 3;
  width: 210%;
  bottom: 0;
  right: 0;
}

@media (min-width: 768px) {
  .hero-module__overlay-image {
    width: 140%;
  }
}

@media (min-width: 1024px) {
  .hero-module__overlay-image {
    width: 105%;
  }
}

.hero-module__svg {
  position: absolute;
  width: 98%;
  height: auto;
  bottom: -2%;
  right: -9%;
  z-index: 2;
  transform: rotate(11deg);
}

@media (min-width: 768px) {
  .hero-module__svg {
    width: 89%;
    right: -2%
  }
}

@media (min-width: 1024px) {
  .hero-module__svg {
    width: 69%;
    right: -2%
  }
}

.hero-module-photo {
  position: relative;
  width:100%;
  overflow: hidden;
  aspect-ratio: 1/1;
}

@media (min-width:768px) {
  .hero-module-photo {
    aspect-ratio: 1100/740;
  }
}

.hero-line {
  z-index: 1;
}

.hero-module-wrapper { 
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto -55px;
  padding-left: 0;
  padding-right: 0;
  z-index: 10;
}

@media (min-width: 840px) {
  .hero-module-wrapper {
    padding-left: 20px;
    padding-right: 0;
  }
}

@media (min-width: 1024px) {
  .hero-module-wrapper {
    position: absolute;
    top:0;
    left:0;
    right: 0;
  }
}

@media (min-width: 1170px) {
  .hero-module-wrapper {
    padding-left: calc((100% - 1170px) / 2);
  }
}

@media (min-width: 1440px) {
  .hero-module-wrapper {
    padding-left: 134px;
  }
}

.hero-module__content {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 52px;
  padding-bottom: 31px;
  padding-left: 20px;
  padding-right: 20px;
  z-index: 0;
}

@media (min-width: 840px) {
  .hero-module__content {
    max-width: 420px;
    height: 100%; 
    z-index: 0;
    padding-top: var(--toRem30px);
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
}

@supports (padding: max(0px)) {

  .hero-module__content {
    padding-left: calc(var(--sal) + 20px);
  }

  @media (min-width: 840px) {
    .hero-module__content {
      padding-left: var(--sal);
    }
  }
}

@media (min-width: 1170px) {
  .hero-module__content {
    max-width: 540px;
  }
}

.hero-module__content h1 {
  color: var(--violet-5);
  margin-bottom: 38px;
}

.hero-module__content .button--primary span {
  transform: translateY(8%);
}

@media (min-width: 1024px) {
  .hero-module__content h1 {
    margin-bottom: 62px;
  }
}

.hero-module__content > span {
  font-family: var(--carnas);
  font-size: var(--toRem20px);
  line-height: var(--toRem26px);
  letter-spacing: 0.17px;
  margin-bottom: 10px;
  color: var(--violet-5);
}

@media (min-width: 640px) {
  .hero-module__content > span {
    font-size: var(--toRem24px);
    line-height: var(--toRem32px);
    letter-spacing: 0.17px;
    margin-bottom: 12px;
  }
}

@media (min-width: 840px) {
  .hero-module__content > span {
    font-size: var(--toRem29px);
    line-height: var(--toRem38px);
    letter-spacing: 0.24px;
    margin-bottom: 24px;
  }
}

.hero-module__figure {
  position: relative;
  width: 100%;
  max-width: 426px;
}

@media (min-width: 666px) {
  .hero-module__figure {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 370px;
    transform: none;
    z-index: -1;
  }
}

@media (min-width: 840px) {
  .hero-module__figure {
    right: 20px;
    max-width: 426px;
  }
}

@media (min-width: 1024px) {
  .hero-module__figure {
    width: 548px;
    max-width: none;
  }
}

@media (min-width: 1210px) {
  .hero-module__figure {
    right: calc((100% - 1170px) / 2);
  }
}

@media (min-width: 1440px) {
  .hero-module__figure {
    position: absolute;
    bottom: 0;
    right: 144px;
    width: 548px;
    z-index: -1;
  }
}

.hero-module__figure img {
   width: 100%;
}

@media (max-width: 665px) {
  .hero-module__figure img {
    max-width: 376px;
  }
}