chore: APPS-2962 move styles from page to story

[farosFreed]

Connected to APPS-2962

Notes:

When section teaser card has 3 cards we'd like the third card to align with the edge of the link. When section teaser card has fewer cards, we'd like the cards to align one after another without big gaps in between.

This PR adds styles for 3 cards to justify content to the edges, but will not change the styles for 2 cards. We do bump the gap for 2 cards to 20px minimum so that it will not ever look too different than the responsive gap between the 3 card layouts, regardless of screen size

Checklist:

• [X] I checked that it is working locally in the dev server
• [X] I checked that it is working locally in the storybook
• [X] I checked that it is working locally in the library-website-nuxt dev server
• [X] I added a screenshot of it working
• [X] UX has reviewed and approved this
• [ ] I assigned this PR to someone on the dev team to review
• [X] I used a conventional commit message
• [X] I assigned myself to this PR

[github-actions[bot]]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-619--ucla-library-storybook.netlify.app

[pghorpade]

:tada: This PR is included in version 3.23.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: