1419/housing basics cleanup

[ColinBuyck]

Pull Request Template

Issue Overview

This PR addresses #1419

• This change addresses the issue in full

Description

This PR adjusts the styling of the info card on the housing basics page so that they align with the media card grid above. Additionally, it implements content changes based on this document.

Note

There are missing translations for the circled areas. This is due to recent content updates that don't yet have translations.

How Can This Be Tested/Reviewed?

This can be tested by going to the housing basics page on Detroit's public site and verifying that the media cards and info cards seem aligned, the new media card (bottom left) is functional, and that the updated strings from the linked sheet is reflected.

Checklist:

• My code follows the style guidelines of this project
• I have added QA notes to the issue with applicable URLs
• I have performed a self-review of my own code
• I have reviewed the changes in a desktop view
• I have reviewed the changes in a mobile view
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have assigned reviewers
• I have run yarn generate:client and/or created a migration if I made backend changes that require them
• I have exported any new pieces added to ui-components
• My commit message(s) is/are polished, and any breaking changes are indicated in the message and are well-described
• Commits made across packages purposefully have the same commit message/version change, else are separated into different commits

Reviewer Notes:

Steps to review a PR:

• Read and understand the issue, and ensure the author has added QA notes
• Review the code itself from a style point of view
• Pull the changes down locally and test that the acceptance criteria is met
• Also review the acceptance criteria on the Netlify deploy preview (noting that these do not yet include any backend changes made in the PR)
• Either explicitly ask a clarifying question, request changes, or approve the PR if there are small remaining changes but the PR is otherwise good to go

On Merge:

If you have one commit and message, squash. If you need each message to be applied, rebase and merge.

[netlify]

✅ Deploy Preview for detroit-partners-dev ready!

Name	Link
🔨 Latest commit	c18afe3
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-partners-dev/deploys/62fabac8beb4230008545e97
😎 Deploy Preview	https://deploy-preview-1420--detroit-partners-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for detroit-public-dev ready!

Name	Link
🔨 Latest commit	c18afe3
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-public-dev/deploys/62fabac815c13c000a450213
😎 Deploy Preview	https://deploy-preview-1420--detroit-public-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for detroit-storybook-dev ready!

Name	Link
🔨 Latest commit	c18afe3
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-storybook-dev/deploys/62fabac800bac10008cb9c90
😎 Deploy Preview	https://deploy-preview-1420--detroit-storybook-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[YazeedLoonat]

LGTM