.hero-homepage {
  padding : 128px 0;
}

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

.hero-homepage__text {
  padding: 0 var(--px240-percent);
  max-width: 335px;
}

.hero-homepage__image {
  position: relative;
}

.hero-homepage__image::after {
  display: block;
  content: "";
  position: absolute;
  width: 282px;
  height: 314px;
  right: 0;
  top: -35px;
  background-color: var(--color-secondary--4);
  z-index: -1;
}

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


.hero-homepage__cta {
  display: flex;
  justify-content: center;
}


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


  .hero-homepage__wrapper {
    display: grid;
    grid-template-areas: 'a b'
                         'c b';
    grid-template-columns: fit-content(40%) 1fr;


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

  .hero-homepage__text {
    grid-area: a;
    padding-top: 150px;
    padding-right: 0px;
    padding-left: 0px;
    max-width: 810px;
    z-index: 2;
    position: relative;
  }
  .hero-homepage__image {
    grid-area: b;
    position: relative;

    margin-left: -10%;
    z-index: 1;
  }


  .hero-homepage__image::after {
    border-bottom-left-radius: var(--radius-l);
    width: 80%;
    height: 100%;
    top: 0;
  }

  .hero-homepage__cta {
    grid-area: c;
    max-width: 810px;
    z-index: 2;
    position: relative;
    justify-content: flex-start;
  }
}


@media all and (min-width: 1300px) {
  .hero-homepage__wrapper {
    grid-template-columns: fit-content(672px) 1fr;
    grid-template-rows: repeat(2, 1fr);

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


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