Сергей Хлопов

Я бы наверно делал вот так (ниже ссылка на codepen). Возможно чем-то поможет.
По поводу фоновых кружков:

• Я бы сделал их тегом img (экспорт из граф. редактора в svg) т.е. было бы 3 svg файла
  
• Прописал бы им position: absolute;
  
• Для картинки с фоновыми кружками сделал бы z-index=1, а для кружка с иконкой z-index=2
  
• С помощью top, left, right, bottom картинку с фоновым кружками расположил как требуется
  

Ещё обычно на небольшой ширине экрана с такими карточками бывает что заголовок переходит на вторую строку, и получается не ровно. К примеру вот так:

Это можно исправить добавив свойство height (высоту) блоку с названием.
В моём примере на ширине 916px заголовок переходит на вторую строку, я добавил медиа выражение которое на этой ширине делает высоту блокам с названием карточки равную двум строкам, что бы ровно было.

В общем кажется решил свою проблему, сделал эти две картинки у которых разная высота была когда они рядом стояли друг с другом, одинакового размера, сейчас они - 416x620, в итоге получилось вот что:

И для картинок сделал min-height: 111px; минимальную высоту задал, что бы картинки при уменьшении не становились меньше заданной высоты, правда из за этого свойства пропорции не будут сохраняться но у меня пока что с этим проблем нет