[BUG] OpenSearchCon Banners Squished on Mobile

[dtaivpp]

Describe the bug
When viewing the homepage on mobile the OpenSearchCon banners are squished.

Screenshots

Host/Environment (please complete the following information):

• OS: iOS
• Browsers: Safari

[dblock]

I believe the banner is now gone, but need to verify that it doesn't happen to the current banner.

Catch All Triage - 1 2 3 4 5 6

[kolchfa-aws]

All of the banners that have text/image will be squished on mobile. To remedy the problem, we should overlay the text on the image and keep the image's aspect ratio the same on any screen size. PR #3252 fixes the problem. Also, there is no need now to provide 2 different images for mobile and desktop because the aspect ratio of the image is kept the same.

A couple of things to note:

• I added a darker color blue button, which we can use on lighter-colored background images. The original bright blue did not provide enough contrast.
• If a banner has a long heading/a lot of text, the banner text is obscured by the button on mobile screens and there's a vertical scroll bar appearing for the banner. We should keep the heading/text short and test the banner on all screen sizes before updating the text. There are a couple of alternative layouts to avoid this problem, but I think the banner text/heading should be kept short anyway, so it's not worth spending time on addressing this.
• While testing, I discovered that the "featured blog posts" carousel contains only one blog even though 3 are marked as featured. There are 10 slots for featured blogs so we should add more blogs to the featured list and we should fix the carousel if it doesn't display the blogs properly.