Nice solution!
I wonder if grid-template-areas might be an alternative way to do this and only need one grid, rather than nested grids/flex boxes? You could have all .cardSection as a grid, and the grid-template-areas might relate to each of the cards, with the "cross" design for desktop and the stacked design for mobile?
Marked as helpful
@ei-abdullah
Posted
@innitman Thanks for the review. if I'm being honest, I didn't have a strong grip on the CSS Grid, so I was left implementing this project through CSS Flexbox. I will surely keep Grid into consideration for my future projects.