Пропорциональное масштабирование в фигмовском макете

Верстаю макет Фигмовский макет. Интересует пропорциональное масштабирование изображения в макете

введите сюда описание изображения

Также на макете (для полноты картины контента)

введите сюда описание изображения

Вот что наверстал

.techno-articles {
  margin-top: 104px;
}

.techno-articles__container {}

.techno__block_container {}

.techno-articles__items {}

.techno-article__item {}

.item__techno-article {}

.item__techno-article_example {}

.item__techno-article_content {
  display: flex;
  /*flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;*/
}

@media (max-width: 696px) {
  .item__techno-article_content {
    flex-wrap: wrap;
  }
  .item__techno-article_image {
    flex: 1 1 100%;
  }
  .item__techno-article_body {
    flex: 1 1 100%;
    padding-left: 0;
  }
}


/*
.item__techno-article_image {
    flex: 0 0 calc(735 / 1441 * 100%); 
    position: relative;
    padding: 0px 0px calc(550 / 1441 * 100%) 0px;    
}
*/

.item__techno-article_image {
  /*
  background-image: url('../img/futurearticlesimages/technoDVD.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  */
  width: 50%;
  display: block;
  position: relative;
  overflow: hidden;
  resize: horizontal;
}

.item__techno-article_image::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: calc(550 / 1440 * 100%);
}


/*
.item__techno-article_image {
    background-image: url('../img/futurearticlesimages/technoDVD.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
    flex: 0 0 calc(735 / 1440 * 100%);
    position: relative;
    padding: 0px 0px calc(550 / 1440 * 100%) 0px;
}   
*/

.item__techno-article_image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.item__techno-article_body {
  flex: 1 1 auto;
  padding-top: 80px;
  padding-left: calc(96/1441*100vw);
  /*136*/
  padding-right: calc(133/1441*100vw);
  /*110*/
}

.item__techno-article_title {
  color: rgba(77, 83, 60, 1);
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 48px;
  /* or 133% */
  color: #4D533C;
}

.item__techno-article_text {
  padding-top: 24px;
  color: rgba(33, 56, 66, 0.6);
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  /* or 162% */
  color: rgba(33, 56, 66, 0.6);
}

.item__techno-article_link {
  color: rgba(33, 56, 66, 0.6);
}

.item__techno-article_comment {
  color: #4D533C;
  background-color: #fff;
  box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.145947);
  border-radius: 8px;
  position: relative;
  z-index: 400;
  margin: -158px calc(664/1441*100vw) 0px calc(323/1441*100vw);
  /*604*/
  width: calc(453/1441*100vw);
}

.item__techno-article_comment_ownership {
  display: flex;
  align-items: center;
  padding-left: 30px;
}

.item__techno-article_comment_author_image {
  width: 90px;
  height: 90px;
}

.item__techno-article_comment_text {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 33px;
}

.item__techno-article_comment_author {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}

.item__techno-article_comment_author_position {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  /* identical to box height */
  color: #152934;
}

.item__techno-article_text>*:not(:last-child) {
  margin-bottom: 36px;
}

.item__techno-article_link {
  margin-top: 90px;
}
<section class="techno-articles">
  <div class="techno-articles__container techno__block_container">
    <div class="techno-articles__items">
      <div class="techno-article__item item__techno-article">
        <div class="item__techno-article_example">
          <div class="item__techno-article_content">
            <div class="item__techno-article_image">
              <img src="https://i.stack.imgur.com/GQ6vV.png" alt="technoDVD">
            </div>
            <div class="item__techno-article_body">
              <div class="item__techno-article_title">The wall new Balenciaga.com</div>
              <div class="item__techno-article_text">
                <p class="first__p">This article is floated online with an aim to help you find the best dvd printing solution.</p>
                <p class="second__p">Dvd printing is an important feature used by large and small DVD production houses to print information on DVDs.</p>
              </div>
              <div class="item__techno-article_link">See Case Study</div>
            </div>
          </div>
          <div class="item__techno-article_comment">
            <div class="item__techno-article_comment_text">
              “In my history of working with trade show vendors, I can honestly say that there is not one company that I've ever worked with that has better service than Exhibit Systems.”
            </div>
            <div class="item__techno-article_comment_ownership">
              <div class="item__techno-article_comment_author_image">
                <img src="https://i.stack.imgur.com/1ZRZu.png" alt="Author comment">
              </div>
              <div class="item__techno-article_comment_author_info">
                <div class="item__techno-article_comment_author">Angel Armstrong</div>
                <div class="item__techno-article_comment_author_position">Founder & CEO, Google</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Подскажите как добиться пропорционального масштабирования вышеуказанного изображения (да и всего контента вместе с текстом) при изменении размеров экрана. Подобный вопрос уже задавался и я пытался применить приведенные методы (см. Масштабирование и Средства пропорицонального масштабирования) в этих вопросах (см. закомментированный css код), но у меня не получилось.

P.S. Желательно, чтобы весь контент пропорционально масштабировался.


Ответы (0 шт):