Fix SDG image grid on About Us page to render in Firefox

[roslynwythe]

Overview

As developers we need to modify the CSS styles applied to the SDG image grid in the Sustainability section of the About Us page, so that layout renders correctly in the Firefox browser.

Action Items

• Refer to the screenshots in the Resources section for a comparison of the appearance of the SDG image grid in the Firefox browser versus the appearance of the same elements in the Chrome browser. Note that some images do not render in the Firefox browser.
• Open the HTML for the SDG image grid layout at _includes/about-page/about-card-sustainability.html and the SCSS at _sass/components/_about.scss
• Resolve any ambiguous or incorrect styles in the CSS grid layout, so that the appearance of the SDG image grid in Firefox matches the appearance in Chrome.
• If it is not possible to create a consistent cross-browser appearance using the CSS grid layout mechanism, implement the same design using a different layout mechanism.

Resources/Instructions

MDN: CSS Grid Layout
Figma Design - About Us page
About Us page: live | GitHub
About Us Sustainability Card Include

• This issue was created as a result of ER: SDG image grid does not render correctly in Firefox browser #4572

[github-actions]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:
Complexity, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels