All solutions

What was the best way to implement the transparent overlay on the image? I tried to use the background CSS property to create a linear gradient overlay with the image, but had alignment issues. In the end I just used a transparent div positioned absolute on top of the image.

For now when I'm doing these challenges, I just put all the files in the main folder. I'm guessing that's not good practice in the long run. What is the best practice for organizing/naming these files? How should I properly separate these html, css, and media files?

Which tag is the best option for the interactive elements, button or input (and which type for input)?

Is it ok to use rem or em for width when making card components like this and the QR code challenge? Or should I be using units like %?

2nd Attempt after feedback. Fixed issues from 1st attempt.

Should formatting be kept out of an id in CSS if the id is used by the JavaScript file to access the element? What was the best way to display changes from 1st state to 2nd state?

What are the best practices for font-sizing? What was the best layout for this challenge (flex, grid, etc)? How should I set up my CSS at the start for common elements (e.i. colors, fonts, spacing, etc)?