Fix slider text overlapping arrows on mobile in Vartheme BS5

Problem/Motivation

🐛 Fix slider text overlapping arrows on mobile in Varbase Media Hero Slider for Vartheme BS5 Fixed
Fix slider text overlapping arrows on mobile view on vartheme_bs5 and on subtheme.

Steps to reproduce

• On mobile view, the body text of the slider overlaps the slider arrows.

Proposed resolution

Agreed when using Bootstrap 5 to increase the default font size from 16px to 18px on the HTML and Body
So that rem will be equal to 18px

Increase horizontal padding of slider content and increase min-height and max-height of the whole slider on "sm" only

Remaining tasks

• ✅ File an issue about this project
• ✅ Addition/Change/Update/Fix to this project
• ✅ 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
• ✅ Accessibility and Readability
• ✅ Code review from 1 Varbase core team member
• ✅ Full testing and approval
• ✅ Credit contributors
• ✅ Review with the product owner
• ✅ Update Release Notes and Update Helper on new feature change/addition
• ✅ Release varbase-10.0.0-alpha1 →
  , vartheme_bs5-1.0.0-rc2 →

Varbase update type

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

User interface changes

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• Issue #3274601 → by Abdullah Yassin → : Fixed slider text overlapping arrows on mobile in Vartheme BS5