Fixed alumni Card responsivity for tablet/mobile

[valerie-wong]

In this PR, I adjusted the styling of the Alumni Cards to be more responsive to different screen sizes and handle long text better.

BEFORE:
Right now you can see that depending on how long some of the words are, the spacing of the fields is uneven.

![Screenshot 2026-02-24 at 8.45.06 PM.png](attachment:0f4abc19-5d4e-4cee-8076-a7f10f3db01a:Screenshot_2026-02-24_at_8.45.06_PM.png)

• As is, it’s not a huge issue, but when the screen changes sizes then it starts getting weird:

My PR changes the layout of the cards different by screen siz

• Large/laptop: keep as image on left then 2x3 layout of fields
• Medium/tablet: keep as image on left then 3x2 layout of fields
• Small/mobile: image on top and then 3x2 layout of fields below

To test this, I would try messing with the screen widths and seeing how they funtion. I would run through searching through alums and filters to see if tehre are also any other edge cases that break. One thing to note, is that on tablet, the filter bar on the left takes up a lot of space. I believe this is out of scope for this specific task as it lies within the Map layout as opposed to just the Alumni Card Component.

[dti-github-bot]

[diff-counting] Significant lines: 49.

[ladriennel]

Hi val, the ui changes look good! I only have 1 comment about a slight formatting thing with the grids.

[ladriennel]

I notice that right now the grid format of the smaller screens is uneven as "Subteam on DTI" field is falling into a 4th row. I think to fix, this base .infogrid should be display: grid not flex. We can set the default columns/rows here and have the overriding column changes in the breakpoint .infogrids.