На обоих сайтах используется скрипт, автоматически распределяющий элементы по всей ширине и высоте контейнера. Это так называемая сетка Masonry.

Вот, например, такой плагин может вам помочь: masonry.desandro.com

Можно конечно убирать ховеры на разных размерах устройства по медиа-запросам, но не всегда узкий экран означает наличие тача и наоборот.
Рекомендую использовать библиотеку https://modernizr.com
Писать самому в js при этом ничего не придется.
Помимо прочих плюшек, плагин в зависимости от устройства, на котором открыт сайт, прописывает в html классы touch и no-touch.

Потом достаточно просто задавать стили по этим классам, например

html.no-touch a:hover {
    color: #ccc
}

Самый удобный способ выравнивания (особенно вертикального) - это flexbox.
Но есть множество других решений, если нужна поддержка старых браузеров.

Вот тут они собраны практически все: https://css-tricks.com/centering-css-complete-guide

Реализовать один в один как на макете не получится. Обычно не сам слайд делают градиентом, а градиент накладывается сверху, переходящий из цвета фона в прозрачный. Например тут taxcom.ru такой градиент сделан справа слайдера. Но на макете фоном идет картинка и цвет не сплошной.