Four-card feature section solution

What are you most proud of, and what would you do differently next time?

This was first time I felt the solution came up quickly and noticed improvement on my CSS skill and felt good about the progress I made. If I were to start all over again, I would start writing the :root {} with variables before starting the project, instead of writing the variables at the end and modifying the codes.

What challenges did you encounter, and how did you overcome them?

The approach of setting the cards in desktop version. I knew I had to use some sort of grid, and I asked ChatGPT for help which I did not like the solution at all, because it was making it too complicated than it needed to be. The solution provided by ChatGPT suggest placing one of the card into second column, but that gave an idea of instead of placement, I would have three columns, and each column being in on container, except the second container having both team builder and karma card, and using flex to set the alignment. Modification on html was done to wrap them around in the container, and then placing the flex containers inside the grid was a hybrid solution that I decided to go with.

What specific areas of your project would you like help with?

Because Figma was not provided, I had to eyeball the solution with the width and size of the card, so I would like some feedback on the dimensions. I'm also not sure if the breakpoint between mobile and desktop was done correctly; I decided that having 70rem of 15px was probably a good breakpoint, but if there's a suggestion as to how to go about this, I would like your advice on it.

The container display for flexbox also felt bit repetitive and I think there could've been better way to do this, but I decided to go with what works first, and optimize later. Now that I look back, it could've been just div class with "column" and modify all of them at the same time instead of repeating each of them individually.

I also don't think the shadow was done properly. I'm not sure how I can measure the shadow in the example and try to mimic the effect since there are many variables in play here.