Responsive Page Using HTML and CSS only

you are using @media (max-width: 375px) which would imply you are designing for desktop first and then you move into the mobile css within this block. It might be easier for you to try the reverse and start with mobile first as they tend to be the more finicky in my opinion. You can then use @media (min-width: 650px) which is a nice middle point between the mobile design and the desktop depending on how responsive you are looking to make either design.

For the box shadow it actually is on both sides. Because of how pale the shadow is and blurry the reference image is it can be hard to see. I used a photo editing tool to help me zoom in and see the details. I also cropped out sections and saved them as separate images and opened them in my browser to help me with the dimensions and placement of these elements since I did not have the figma file to see the crisp details. If ever you want me to show you via screen share what I mean as this might not be clear in writing please message me directly I'd be happy to show you.