.hero {
  padding : 128px 0;
}

.hero__wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__text {
  padding: 20px;

}

.hero__text h1 {
  margin-bottom: 16px;
}

.hero__image {
  position: relative;
}



.hero__image picture {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero__image img {
  border-bottom-left-radius: 150px;
}




@media all and (min-width: 700px) {


  .hero__wrapper {
    flex-direction: row;


    padding-left: var(--px240-percent);
  }

  .hero__text {
    max-width: 335px;
    padding-top: 32px;
    padding-right: 0px;
    padding-left: 0px;
    max-width: 450px;
    z-index: 2;
    position: relative;
  }


  .hero__image::after {
    border-bottom-left-radius: var(--radius-l);
  }
}




@media all and (min-width: 1500px) {
  .hero__wrapper {
    padding-left: 275px;
  }

  .hero__text {
    padding-top: 150px;
    max-width: 672px;
  }
}