responsive web for both weg and mobile users

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

I made the web's design different for mobile and desktops using @media query. i still need to learn how to use it properly though. I tried to use BEM system

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

for the width of the mobile users it went fine. For the website, i had some problems with it. When it comes to the width and the height of the .protect-box, i had some difficulties with it. The elements inside the box (texts and image) went outside of the box.

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

Can you look at my media queries? is the css optimized with the structure and the codes? For the @media screen and (min-width: 600px) i need help with. whenever i made the height of the website smaller, the .product-box__text-box elements went outside the box. Everything went outside the box except the image. The button and the texts went outside of the box when the height of the website got smaller. Do you have any suggestions to help me with?