All solutions

• Continued to use custom properties to define colors

• Utilized BEM naming conventions for clear class names

• Used utility classes such as card-container, and then secondary classes such as card-light, card-md, card-dark, and card-brand to define universal CSS properties vs individual properties based on color

• Utilized max-width inside my media query to ensure that the grid didn't get too distorted horizontally. Once the width of the container exceeded 1268px, the grid will not grow any more

• Expanded my use of custom properties. Assigned properties for colors, font weight, and font sizes. This also allowed me to redefine the font size custom properties inside of the media query. Changed the naming convention to something a little more generic so that if I wanted to completely change the color, I could do so without making things confusing

• Used Flexbox on the mobile sizing and switched to Grid inside of the media query. Used the grid-row and grid-column attributes to assign placement inside of the grid

• Finally begin to understand that there are 3 levels to each grid, and different properties to manipulate each one - container, items, and content

• Used custom properties to define the colors. This will allow me to change all the colors just by making changes in the custom property itself, and that will flow down to all my CSS declarations

• Went with a mobile first approach. This allows the simpler layout (mobile) to be the main layout, and then less declarations need to be made in the media query

• In the hover effect, the background color needs to match the background color of the corresponding card. I used the 'inherit' function on the background color so that it will take on whatever background color assigned to its respective ancestor

-Started using custom properties to define my colors. Want to explore using them for more attributes -Had trouble figuring our how to place the before pseudo-element so that it looked good -I used an anchor tag instead of a button input for the button. I couldn't figure out how to get the pseudo element to show on the button

I would appreciate any insight on how to do a button input with an SVG image inside of it