How to deal with such a layout?

Question

css

Greetings.
They gave me the layout for the night .... As a result, on the first screen there is a photo with huge non-transparent indents. How can you make up in such a situation?
The layout itself - https://www.figma.com/file/ar7UXFvVHYTbDODRM09oAy/...

<section class="section section-one">
    <div class="container">
      <div class="header">
        <div class="header__logo">
          <img src="img/logo.png" alt="logo" class="logo">
        </div>
        <nav class="header__menu">
          <ul class="menu__box">
            <li><a href="">Преимущества</a></li>
            <li><a href="">Принципы работы</a></li>
            <li><a href="">Адаптация</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">Поддержка</a></li>
          </ul>
        </nav>
        <div class="header__social-icons">
          <a class="social" href=""><img src="img/vk.svg" alt=""></a>
          <a class="social" href=""><img src="img/inst.svg" alt=""></a>
          <a class="social" href=""><img src="img/youtube.svg" alt=""></a>
        </div>
      </div>
      <div class="main-offer wrapper">
        <div class="main-offer_wrapper">
          <h1 class="main-offer_title">
            Принимайте чаевые картой по QR‑коду
          </h1>
          <p class="main-offer_offer">
            Платформа «нетмонет» позволяет Гостю удобно оставить отзыв и отблагодарить персонал банковской картой
          </p>
          <div class="main-offer_btn_wrapper wrapper">
            <a href="" class="btn-offer btn">Подключить заведение</a>
            <a href="" class="btn-sub-offer btn">Оставить чаевые</a>
          </div>
        </div>
        <img src="img/main-phones.png" alt="" class="main-offer_img">
      </div>
    </div>	
  </section>

I also attach the code of my block.
I will be very grateful!