.hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: var(--padding-XL);
  padding-top: var(--padding-L);
  padding-bottom: var(--padding-XL);
  padding-left: var(--padding-XL);
  padding-right: var(--padding-XL);
  background-color: var(--color-lightsage); 
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
}

.column_half {
  width: 50%;
  margin-top: 10rem;
}

@media screen and (max-width: 45rem) {
  .hero {
    padding-left: var(--padding-M);
    padding-right: var(--padding-M);
    background-image: var(--bg-mobile);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
  }
    .column_half {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 8rem;
    padding-bottom: 23rem;
    width: 100%;
  }
}