Four Card Feature Section

Hello everyone,

I built this one from mobile version first. There is two break points and a simple hover effect on the cards.

I have learnt something from this project. First I struggled to put the 'Supervisor' and 'Calculator' cards on the right position on the desktop version, I tried to use grid but failed, then I remember transform: translate(); to move the object up and down, job done! But when I add the hover effect in, only the 'Team Builder' and 'Karma' cards behave what I want scale(1.05), the 'Supervisor' and 'Calculator' cards are bounced up/down instead of scale up. I think maybe I can put the transform: translate(); back to offset the bouncing effect and somehow it works!! Happy day :)

Any feedback on my codes will be much appreciated, thanks :)