After fighting with the Image component from Next.js, and finally befriending it more and more, I have one final issue I can't seem to figure out.

When I visit my page on a mobile phone, having it upright (in portrait mode), the images render correctly - filling the maximum width available. All is good so far. Now when I rotate my phone 90 degrees, changing to landscape mode, all my CSS changes according to my media queries, but the Images stay in the same size they originally loaded. Thus, not filling the maximum width available now. On refresh, they are rendered correctly.

Also, in the Chrome Dev Tool Phone Emulator, it all works as expected. When I change orientation, it immediately changes the image size accordingly.

Let me know if you need any part of my code, looking forward to hearing from you!