[Enhancement] - Optimize volunteer images for smaller screens

[andycwilliams]

Describe the Current Behavior/Feature:

The volunteer images look good on desktop screens but are not fully responsive on smaller screens.

Large:

Medium:

Small:

Rationale:

The layout for large viewports is nice and orderly. However it does not translate well for medium viewports. The image sizes are askew.

Proposed Changes:

Using one or more breakpoints, redesign the image layout so it's responsive for all screens.

Perhaps by making all images the exact same size for medium size screens. Open to discussion.

Also consider a different design for the smallest screens so that it is no longer a single column. That may not be the greatest use of available space. We could perhaps reduce it to two columns.

[asaltveit]

How is this looking? @andycwilliams @Jared-Krajewski

Screen.Recording.2024-12-12.at.3.08.25.PM.mov

[Jared-Krajewski]

How is this looking? @andycwilliams @Jared-Krajewski

Screen.Recording.2024-12-12.at.3.08.25.PM.mov

Thanks for taking a look at this one, these changes might be a bit much. I think all we need to take care of this issue is making them all the same shape at this transition is enough (- the padding shift that happens around 900px width)

Screen.Recording.2024-12-12.at.3.39.20.PM.mov

Pictures also should not change if the view port is rescaled while remaining on the page.