Draft: Resolve "Update Session Home: Looks - mobile design"
I used a few new css features to achieve this:
Container queries
This is used to realign the card contents on mobile.
Advantage
If the cards are re-used in for example a grid layout, their contents can be based on the size of the container they're in, rather than the size of the viewport
Disadvantage
The cards need to be placed in a component with a container, so that they know whether they should re-size or not. If there's no container, they'll keep the long desktop layout.
To mitigate this, I included a fallback media query, in case there's no defined container above it, the responsive layout will kick in based on the desktop size
Css subgrid
Here the support is not as good, it's supported in Firefox, but not Chrome-based browsers, but it should be coming soon. The good news is howerever, when it's not supported, it doesn't look so broken
This is fixing an alignment problem with the text content of the cards
Without subgrid
Here the icons aren't quite aligned with one another
With subgrid
Advantage
The changes to the content size of one card, fixes the content size of adjacent cards
Disadvantage
In order to be aligned, the cards need to be placed in a container with at least three columns, of flexible width
I'm a bit uncertain whether we should keep the subgrid, although imo it looks nicer when the content are aligned with one another
Closes #564