Help! Custom CSS split screen for mobile, text over image.

Hello, I have an issue with Custom CSS split screen. On desktop the split screen works perfectly but on mobile text is over the image. I need the text to be below the image. All the split designs are now broken on mobile. My website : https://zeynaagency.com/ 

Could you please help ? Here the code I used  :

section[data-section-id="63514b39bf5a053a82731917"]{
  @media only screen and(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:500px;
    }
  }
}

Thank you for your help!

Juliette

You can consider this suggetion