Responsive card using CSS Grid

Hi folks, another newbie project completed. This was my first venture into the wonderful world of CSS Grid. I had to watch a number of tutorials and read a few docs to get my head around the basics. This was a helpful project to get feet wet in this. Once again the help on in the Discord community was awesome, thanks guys. One or two things below of interest.

• I did struggle with Grid to begin with, at times no matter how many docs I read or tutorials I watched actually putting into practice is difficult. I knew starting the project that would be the case. It was the same when learning Flexbox, yet a number of projects later Flexbox is becoming less daunting, this is only accomplished with practice and building projects. Therefore I knew Grid would be a struggle, but we must wrestle with it to become familiar with it.

• I feel I am still wrestling with the padding/margin/gap and when to use each one. Once again, building projects and wrestling with it is the only way. I do feel I am making progress with this.

• I have started to get into the habit of creating variables for colors, fonts, and box-shadows in the css file. I am fully aware these small projects only have a small number of each, however, I feel it is a worthwhile habit to ingrain.

• Another aspect that I am finding super helpful is writing the README and recording what I am learning. I feel this solidifies my learning, and I am becoming more familiar with markdown. For the screenshots of completed project I am now creating a folder alongside the index.html and styles.css etc in VSC and just linking from there. Maybe I am late to the party in realising this, but is so super quick to do.

• All feedback welcome. One particular question I have is I am using too many classes? Almost every element I create in the html seems to have a class.

• Thanks to Chamu and Grace Snow in Discord community for their invaluable help once again.