Help with responsive images on Mozilla Splash Page!

Hello! This is my first post, so apologies if I leave out any helpful information.

For the Mozilla Splash Page challenge, I am having trouble getting my images to switch sizes at the 500px breakpoint. I published my files on GitHub Pages, but when I adjust the viewport across the breakpoint using Chrome’s inspector tools, there is barely any change in image size. Yet the art direction on the red panda landscape works. What gives?