В целом неплохо. Когда я учился, у меня второй макет был намного хуже)

Как-то совсем топорно сделаны стрелки. Если не критично, можете использовать Вот это для выбора стрелок на слайдер например. Не используйте цифры в названиях классов. Альтернатива: "arrow-left-top", "arrow-right-top".
Почему не использовали bootstrap (лично мое мнение, с ним было бы проще, много одинаковых элементов расположенных горизонтально)? Принципиально, или еще не знакомы?

Почему padding а не align-items: center? Используйте флекс по полной, это мощный инструмент который упрощает жизнь.
Свойство transition устанавливайте на сам элемент, а не на hover, тогда анимация будет плавная и при наведении, и при уводе курсора с элемента.
Далее все более менее, как для второго макета, очень даже неплохо.
Повторюсь, хорошо ознакомьтесь с флексами, есть много мест в вашем коде, которые можно было сделать проще с помощью этого инструмента.
P.S. - Не стоит воспринимать мои слова как истину, уверен есть много людей которые сделали бы лучше, чем так как я написал, я просто выражаю мнение на основе своего опыта.