Images do not scale on narrower viewports resulting in horizontal scrollbars

Here is an example of an image on a narrow viewport that's not scaling down like the video below it does. <img width="837" height="1402" alt="Image" src="https://github.com/user-attachments/assets/8f1d4415-255b-4f12-80a6-92fd5c952202" /> This is a pretty easy to solve by updating the `max-width` with a `min()` ```css figure img, .insert-image img { margin: 0 auto; display: block; max-width: min(700px,100%); height: auto; } ``` This will allow the image to be a max-width of 700px if the parent container/viewport is greater than 700px, but it will make itself 100% the width of the container/viewport if less than 700px. No media queries necessary. Here's an example of what it would look like. <img width="864" height="811" alt="Image" src="https://github.com/user-attachments/assets/ac59e251-9dd5-4fcc-a9ce-a5d09aefb00a" />