ER: Text Overflows in Sustainable Development Component

### Emergent Requirement - Problem

The text overflows in the Sustainable Development component in mobile widths. These issues was noticed in the program area pages such as https://www.hackforla.org/program-areas/citizen-engagement. Also, the text forms a thin column to the side when the mobile width is wide enough.

### How to replicate

1. Go to https://www.hackforla.org/program-areas/citizen-engagement
2. Right click, Inspect
3. Click Mobile
4. Open one of the sections
5. See SDG icon is too large
6. Text is off the page

Mobile

Desktop

### Issue you discovered this emergent requirement in
- #3328

### Date discovered
12/6/25

### Did you have to do something temporarily
- [ ] YES
- [x] NO

### Who was involved
@myronchen-git
@ldaws003

### What happens if this is not addressed
The website would look unprofessional on mobile view.

### Resources

### Recommended Action Items
- [ ] Make a new issue
- [ ] Discuss with team
- [ ] Let a Team Lead know

### Potential solutions [draft]
- [ ] Review front end design on [figma ](https://www.figma.com/design/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464-0&p=f&t=BAakYKEAQPD2PVSB-0)to better understand how things should look
- [ ] add css for the Sustainable Development Goal element in _includes/program-area-pages-cards.html
- [ ] make the image take up a block on mobile
- [ ] have the text appear below the image on mobile
- [ ] prevent text overflow and allow wrap on mobile