Проблема с выравниванием изображений поверх другого изображения при изменении размера окна, а также при увеличении и уменьшении масштаба

Question

Я получаю результат согласно требованиям. но макет веб-страницы испортился. когда пользователь изменил размер окна или увеличил масштаб.

HTML код:

    <div class="infoWrapper">
        <img src="bg.png" />
        <p class="benefitContent">Lorem ipsum de controverys</p>
        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.-Zh3w6-FRNIn988Ih9zRcgHaHa%26pid%3DApi&f=1"
            class="support" />
        <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.-Zh3w6-FRNIn988Ih9zRcgHaHa%26pid%3DApi&f=1"
            class="sketch" />
    </div>

CSS код:

    .infoWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .benefitContent {
        position: absolute;
        top: 35%;
        left: 43%;
        font-weight: bold;
        width: 16%;
        line-height: 31;
      }
      .support {
        position: absolute;
        top: 3%;
        left: 30.7%;
      }
      .sketch {
        position: absolute;
        top: 3%;
        left: 67%;
      }