Person card / grid responsive styles

[Woozl]

The design file depicts three different sizes for these people cards:

On the individual project / research groups pages:

On the directory page, chief scientists / important people are shown at 4 cards / row, whereas everyone else is shown at 5/row:

Currently the people cards have a fixed width of 250px. When the page wraps, these cards break to the new line if there isn't enough room. If we use grid-template-columns: repeat(5, 1fr), the cards size themselves appropriately to fit 5 per row. I think it'd be better for the cards to dynamically size to fill up all of the horizontal space, and break when they become too large / small (I think you can use minmax() for this?). If CSS grid doesn't provide a method to do this, we could always manually change the number of columns using media queries. For this change to happen, we will also need to remove the hardcoded height on the component's image so it can dynamically size itself.

[Woozl]

Now that I'm looking at it, the first image could be implemented the same as the last (5 cards / per row). They just appear overall smaller because they are in a smaller container, not like the directory page, which is almost the full width of the wrapper