Use picture element to avoid unnecessary image load

[aduth]

🛠 Summary of changes

Updates footer markup to use <picture> element to avoid loading an unnecessary image.

The GSA logo rendered the footer is either light or dark depending on the viewport size. In the previous implementation, both images would be downloaded, despite the fact that only one would ever be visible.

📜 Testing Plan

1. Go to http://localhost:3000
2. Verify no visual regression of the "GSA" logo in the footer, at both large and small viewport size
3. Open browser developer tools Network tab
4. Reload the page
5. Verify that only one variation of the "square-gsa" logo is loaded

👀 Screenshots

Before	After

[aduth]

There's a little bit of trickery here, where we never expect the "fallback" to be loaded here. But the fallback is strictly required by the spec. The only reason the fallback would be triggered is for mobile, where we'd want to show the mobile image, hence the inversion between the two images here.

[aduth]

Separately, I'd previously considered using an SVG mask for this image to vary the color depending on viewport size, but it's not just the difference of blue vs. white, since the actual GSA text itself is part of the image. Technically we might be able to make that invisible and let the background show through.