Верстка лэндинга. Соблюдение размеров макета и адаптив

Верстаю макет Webovio. Есть следующие рисунки в интересующей части макета

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

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

Наверстал следующее

.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;
  width: 100%;
  /*flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;*/
}

@media (max-width: 768px
/*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 {
  width: 50%;
}

.item__techno-article_image img {
  width: 100%;
  height: auto;
}

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

.item__techno-article_body_content {
  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: calc(36 / 1440 * 100vw);
  line-height: 48px;
  /* or 133% */
  color: #4D533C;
}

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

.item__techno-article_link {
  color: rgba(33, 56, 66, 0.6);
  font-size: calc(18 / 1440 * 100vw);
}

.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: 0px/*calc(36 / 1440 * 100vw)*/
  ;
}

.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/fUNvC.png" alt="technoDVD">
            </div>
            <div class="item__techno-article_body">
              <div class="item__techno-article_body_content">
                <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>
          <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/nkJCo.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>

  1. Должно быть как на макете, а именно в правой части (где расположен заголовок The wall new Balenciaga.com или блок .item__techno-article_body) между абзацами должны быть отступы как на макете. Между следующими элементами лэндинга в блоке ниже

<div class="item__techno-article_body">
  <div class="item__techno-article_body_content">
    <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>

должны быть отступы как на макете.

При ответе задавайте отзывчивые размеры (на макете ширина экрана 1440px, а у меня на компе 1366px, как видно у меня в комментах задаются пропорциональные расстояния типа (calc(96 / 1440 * 100vw) для обеспечения отзывчивости, резиновости). Подскажите как этого добиться (нужных размеров между блоками).

  1. Помогите как написать адаптив (особенно адаптив комментария - “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.”) Пытался, не получилось.

Заметка. Открывал Инструменты разработчика и увидел следующие стили, которые не задавал в css файле

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

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

Откуда взялся у .first__p margin-top: 18px - не понимаю? (аналогично у .second__p)

Привожу расстояния для правой половины блока

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

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


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