One section of my website looks perfect on desktop and tablet, yet breaks on mobile screens. The problem is confined to specific elements inside that section—namely the images and the surrounding text. On phones the images either overflow or appear distorted, and the copy runs off the viewport instead of wrapping cleanly. I’m looking for a quick, surgical CSS solution that keeps the current HTML structure intact. A few well-placed media queries, flexbox tweaks, or max-width rules should do the trick; no redesign, framework swap, or component rewrite required. Please keep class names unchanged so the rest of the site continues to work as-is. Deliverables • A single updated CSS/SCSS file (or inline snippet) that corrects the mobile display of this section • Before/after screenshots—or a brief screen recording—showing the fix on common phone widths (320 px–414 px) • A concise summary of the changes for future reference If you can jump in and wrap this up quickly, let’s get started.