Image sur une div

Bonjour,

Je souhaite intégrer un petit bloc en HTML/CSS, mais celui-ci me pose un petit problème au niveau du responsive :/

Photo

L'idée est d'avoir un section avec un background color qui contient à la fois un texte et une image à cheval. Je bloque sur le positionnement de l'image à cheval, en effet, celle-ci doit également s'adapter lorsque l'écran est plus petit et donc le texte est plus long (hauteur). L'idée étant de garder la même distance entre le haut de la section et le haut de l'image.

Ce que je fais

Pour le moment j'ai séparé en deux divs

<div class="wrapper_head">
            <div class="container">
               <div class="section_head section_about-home" id="wrapper_head">
                  <span class="sh_subtitle">Subittle</span>
                  <h2 class="sh_title">Mon titre</h2>
                  <p class="sh_content">Mon texte</p>
                  <div class="sh_cta">
                     <a href="#" class="btn-ghost">
                        <span>
                        Mon lien
                        </span>
                     </a>
                  </div>
               </div>
            </div>
         </div>
         <div class="wrapper_thumb">
            <div class="container">
               <img src="./assets/images/image.jpg" alt="">
            </div>

  .wrapper{
        position: relative;
        .wrapper_head{
            width: 84vw;
            margin-top:-270px;
            .container{
                width: auto;
                padding: 0px 8vw;
            }
        }
    }
      .section_head{
          width: 55%;
          position: relative;
          z-index: 99;
      }

Ma question, étant quelle est la meilleur solution pour intégrer ce bloc? Un margin-top ? Ou un position absolute ? Ou un transform: translate ?