Виктор

wow.js (https://wowjs.uk/) + animate.css (https://daneden.github.io/animate.css/)

Еще можно так
для блока обертки:

display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
   margin-right: -10px;

для блоков с картинками учитывая что их 4 штуки и расстояние между ними 20px:

width: calc(25% - 20px);
margin-left: 10px;
margin-right: 10px;

Картинки у тебя закрывают текст, это наверное не есть гуд. Лучше сделай их фоном.
Может где-то надо поправить. Но смысл такой))) Сам такой макет верстал когда-то на bootstrap 3)))

Сделай div обертку и задай ей display: flex. В нем два дива. В первом картинка во втором твои инпуты. И чтобы инпуты были друг под другом оберни каждый инпут в тэг <p>. Так как тег <p> блочный он буде занимать всю строку и следующий тэг соответственно будет под ним

Ничего себе паутинка))) А чем плоха старая сетка колонками 12, 16 и т.д)) Очень странно что сделали такую сетку при таком слабеньком макете. На первом скрине видно, что правая часть 50% и левая столько же. И у правого и левого блока есть падинги отделяющие их. Я бы сделал флексами или гридами если не важна поддержка старыми браузерами. И каждый вложенный блок во флекс-контейнере по 50%, внутри каждого из блоков также можно использовать флексы. Если любите сетку то используйте какую-нибудь css-библиотеку с сеткой (их сейчас целая куча)

Можно transform: translate(ocь х, ось у)