Make a Difference Banner to be responsive

[thaninbew]

Summary

Update the “Make a Difference” homepage hero/banner so it behaves responsively across desktop, tablet, and mobile. The banner should shrink its height, font sizes, and layout for smaller viewports, potentially becoming a square-ish banner on mobile while preserving the gradient overlay and image fade, ensuring readable text and reasonable screen usage on phones

There are no existing designs on Figma, but we can go with a shrinking banner and font size approach.

Acceptance Criteria

• Desktop layout remains visually consistent with current design
• As the viewport width decreases, banner height and text scale down proportionally (shrinking banner and font size approach) rather than overflowing. Also, it must not cause horizontal scrolling (when the horizontal scrollbar appears)
• Preserve the gradient overlay and fade into the background image.
• Keeping all text fully visible without clipping or overlapping.
• Layout works in both portrait and landscape orientations without layout breaking or content overflow.
• uses existing tech stack conventions (TailwindCSS / shadcn)
• screenshots or notes attached to the PR - Desktop, tablet, phone.