It is a B2B landing page that I've been developing on a WordPress site. I need to get the hero section exactly as the image below shows.

I couldn't go any further than what the HTML below does. Positioning using CSS seems a bit challenging to me. Could you please have a look at it and help me add CSS to match it to the image above?

<div class="corp-hero relative mb-row corp-hero-img relative no-touch select-none">
  <div class="texts-and-cta">
              <h1 class="mb0 color-tan-dark">
          CORPORATE GIFTS        </h1>
                    <h2 class="mb0 mt2 alt-heading h4">
          Impressive Business Gifts That Create Impact        </h2>
                    <div class="shop-gifts-cta">
          <a href="https://gifts/collections/corporate?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1636628533586.1636648800123.68&amp;__hssc=198200880.9.1636648800123&amp;__hsfp=530052575" class="btn cta-btn-purple" role="button" target="" title="Shop Gifts">
            Shop Gifts          </a>
        </div>
          </div>
        <picture>
      <source media="(max-width: 480px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-640x200.jpg">
      <source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-1024x320.jpg">
      <source media="(max-width: 1280px)" srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy-1500x469.jpg">
      <source srcset="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy.jpg">
      <img src="http://pwp-wordpress/wp-content/uploads/2021/11/Home_Office_Collection_copy.jpg" alt="">
    </picture>
  </div>

Please note I want text CORPORATE GIFTS, lorem..elit and View Gifts button to overlap the background image. Below is how far I could bring it with CSS.