Responsive CSS Cards - Plain CSS

Hi Jack - fairly new to CSS & JavaScript myself - hopefully this is useful.

For CSS tips and guidance I refer to Kevin Powell's content on YouTube (https://youtu.be/3Y03OSNw6zo). His way to organize his CSS is broadly as follows:

• /* root level vars / e.g. - --clr-bg-xx: / for coloring a background */

--wd-mobile:

--wd-desktop:

• --fs-base:

• --ff-base:

• --fw-regular:

• --fw-bold:

• --fw-dark:

• /* CSS Reset */

see CSS Reset from https://www.joshwcomeau.com/css/custom-css-reset/

• /* Components */

• /* Bespoke */

• Structure within a class:

/* Section vars */

/* display */

/* positioning */

/* box model */

/* typography */

/* manipulation */

Re your 2nd question - again I'm in the early part of my journey! Kevin talks about:

• avoiding unnecessary CSS code e.g. adding width everywhere or height: auto as a couple of examples
• spotting where there is commonality across a number of classes and drawing them out to a common reusable class

I've tried to use Kevin's approach in my solution posted just after yours.

All the best with your future coding!