Responsive design using JavaScript and CSS

What are you most proud of, and what would you do differently next time?

I am most proud of making my design responsive for a wide range of popular device sizes. Additionally, I am proud of myself for figuring out how to make my popup bar remain at the bottom and be slihtly responsive to all mobile sizes (The width is a lil big for 320 :D). And most importantly, I am proud of myself for completing this project, I had thought of giving up multiple times and had to completely redo my CSS.

What challenges did you encounter, and how did you overcome them?

One challenge I encountered was realizing that I was creating media queries for every size. After posting my question in the Frontend Discord community and reviewing the feedback, I decided to re-write my CSS code entirely and put more thought into it as I went along.

Another challenge I encountered was being unable to keep my popup bar at the bottom of the container for mobile sizes between 320-500ish. I overcame this by using the "left" property to remove the existing styles from my original code, and using the same margins as my container to assist with aligning it to the left.

A different challenge I encountered was making the drawer image more responsive for all screen sizes. I overcame this by using the object-fit, object-position, max-width, and width properties.

What specific areas of your project would you like help with?

One specific area that I would like help with is trying to make the popup bar for screensizes less than 550px fit the width of the container exactly. The width of my popup bar kept going past the width of my container, I ended up using max-width and width for my popup, but it's still not exactly fitting for screensizes between 320px-550px.

Additionally, any feedback on my code, structure, or tips in general are greatly appreciated. Thanks in advance! :D