To do

1. learn about height:100%; and object-fit:cover
2. Use rem (or em when it makes sense) instead of px so that your page scales correctly when the user has set a different font size in the browser
3. Avoid setting fixed widths or heights on elements (like on .desc). Try to control the size of the card sections using Flexbox or Grid
4. add a max-width: 100% on the card just to be sure that it never gets bigger than its container (questionable)

LEARNINGS

1. Picture tag
2. for the image to occupy the space height: 100%; object-fit: cover;

Resources

1. SLACK DISCUSSION
2. mix-blend-mode
   • w3schools
   • MDN