Make homepage hero responsive

[sskylar]

I'm noticing some issues on smaller screens like my 13" MacBook:

Most of the elephant is cut off.

Could we make this responsive instead of a static size?

Example:

https://user-images.githubusercontent.com/423740/181685019-c16a8fa9-07a1-4361-bc6c-4be14ee23d89.mp4

Changes required for this:

min-width: 200%; /* because image is almost 4000px but we only care about the middle 2000px on small screens */
max-width: 200%;
object-fit: contain;
left: -50%;

Also would help if:

• [ ] We put a background fill on the container, so the text is not white on white (in that case hero should have no transparency)
• [ ] The hero image has extra bleed on the top

Still works on larger screens too:

[sskylar]

The hero image has extra bleed on the top

@tyleemem Do you think this is possible (like the mobile one)? or should we just choose a background color to match closely?

Here's what I mean (shown with white background):

https://user-images.githubusercontent.com/423740/181686425-fd093c2f-ba40-4fb0-8f29-f17612ec4d35.mp4

[danielgamage]

fwiw we were thinking of using a extended-width version of the mobile hero on those smaller desktop sizes

[sskylar]

That could help! I think in general though if we can scale it responsively (as in the example above) we can avoid cropping the important areas.

[sskylar]

I'll make a new branch with a couple ideas for this

[sskylar]

I set up a PR. Feel free to pull from there if that helps??