Change Horizontal media teasers to use card-body and g-0 from Bootstrap 5 for better look and padding

Problem/Motivation

Requested by Razem

https://getbootstrap.com/docs/5.0/components/card/#horizontal

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.

Proposed resolution

Use card-body and g-0. But do not add the Card class by default

Remaining tasks

• ✅ File an issue about this project
• ✅ Use card-body and g-0
• ✅ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ Update Release Notes and Update Helper on new feature change/addition
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Release varbase-10.0.0-alpha1 → , vmi-3.0.0-alpha1 →

Varbase update type:

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

VMI - Standard 16:9 - Posts - Horizontal Media

→

VMI - Standard 16:9 - Episode - Horizontal Media

→

VMI - Traditional 4:3 - Posts - Horizontal Media

→

VMI - Traditional 4:3 - Episode - Horizontal Media

→

VMI - Square 1:1 - Posts - Horizontal Media

→

VMI - Square 1:1 - Episode - Horizontal Media

→

API changes

• N/A

Data model changes

• N/A