Figma, Grid areas & auto-fit, flex & auto margins, BEM, SASS

Improved upon my previous solution by using grid.

Loosely used BEM naming convention and the WordPress coding style guide for CSS.

Flex is for card content, Grid is for laying out the cards.

Grid makes markup shorter and simpler. Easier to avoid having container divs for rows/columns compared to using flexbox.

When looking at the CSS, the layout is much easier to understand with Grid, especially with grid-areas in the desktop version.

With grid auto-fit, I was able to have a decent laptop layout as well, without having to specifically develop it, or have a separate breakpoint / file for it.

Figma file is not from FEM but my own work. Makes pixel perfect development easier when you've mapped out the layout first.

Still need to learn box-shadow better.