Images scale to container width on mobile

An <img> tag with width="1200" and no max-width: 100% renders at 1200 physical pixels even on a 375px-wide phone, forcing horizontal scroll and cutting off surrounding content. This breaks layout for every page containing the image and undermines the viewport meta configuration that would otherwise keep the page mobile-friendly. Images are one of the most common causes of accidental overflow because <img> defaults do not include any responsive constraint.

Apply a global CSS rule to all images so they scale down to their container. For Next.js <Image>, always provide a sizes prop so the browser picks the right source at each breakpoint. Put the base rule in src/app/globals.css.

img { max-width: 100%; height: auto; display: block; }