feat: Create amended pattern for 'equal-height-row'

[petesfrench]

This is a suggested pattern amendment for equal height row

This work came about as @mattea-turic suggested that the equal height row pattern did not look good on small/medium when you wanted to retain the image but there is not much text, see pr. It was suggested to retain the same stacked pattern that is used on large screens on medium and small screens.

I am looking for your thoughts on this. Should this exist as a custom variant on canonical.com? Could the variant be upstreamed (especially if it sees use in multiple places)?

The mock up for the pattern exists here: https://www.figma.com/design/uJUwbUAGDog4KCMivrMpnl/24.10-Data-Fabric?node-id=909-10435&node-type=FRAME&t=W6zUuA3DegagwprK-0

Done

• Align the styling between large, medium and small screens. This PR makes the individual cards/items retain their style.

QA

• Open demo
• [Add QA steps]
• Review updated documentation:
  • [List any updated documentation for review]

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• [ ] PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• [ ] Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix release (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• [ ] Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

Equal row height on medium screen without much text:

Adjust pattern on medium screens:

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

I'm not sure exactly, but it looks similar to "wrap" variant we just released: https://vanillaframework.io/docs/patterns/equal-height-row#wrap-variant

@lyubomir-popov @pastelcyborg is this new proposal the same that we already added?

[pastelcyborg]

Yeah - as discussed on Mattermost, I believe we can close this PR. The wrap variant essentially provides the same functionality, with some minor differences, but also without modifying the root component, so the non-wrap variant is kept intact. The docs for Equal Height Row also contain examples of how to use our new responsive image container, which helps make images look optimal across all screen sizes.