Mobile First four card feature using Grid & Flexbox

Your solution is not bad, but I think it can be improved using some of grids features. The approach I took is for the first and third grid items to span 2 rows. After that I just used align-self: center on them to center them within the two rows. Now you can remove margin from the karma card it aligns itself perfectly.

.box1, .box4{
 grid-row: span 2;
align-self: center;
}