fix: style changes for hero carousel

[nawaz-adobe]

Fix #4

Test URLs:

• Before: https://main--piramal--aemsites.hlx.page
• After: https://issue-4-1--piramal--aemsites.hlx.page

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [9c27b8f](https://github.com/aemsites/piramal/commit/9c27b8f9b9fa980883ce63bf3326fa5d3733af16) :white_check_mark: (latest) * [f2f738b](https://github.com/aemsites/piramal/commit/f2f738bc561143ec1c5facc49ea2b5d95122e2a4) :white_check_mark: * [afa6216](https://github.com/aemsites/piramal/commit/afa621688478f599405f69b618d05ff1b7ad52ab) :white_check_mark: * [007ca13](https://github.com/aemsites/piramal/commit/007ca133eb52746481afba060bfabcf94af0a751) :white_check_mark: * [1f9cb61](https://github.com/aemsites/piramal/commit/1f9cb61f94b4b15a88275971e1ba6806af0e8e49) :white_check_mark: * [14d51a6](https://github.com/aemsites/piramal/commit/14d51a64533239a7997fefc4cce22cb2cfa4cd08) :white_check_mark: * [61faada](https://github.com/aemsites/piramal/commit/61faadad32bcbcad485232b7adfb42638c28b85f) :white_check_mark: * [8961f45](https://github.com/aemsites/piramal/commit/8961f452917a6120986589fcc0be2859afab2ff8) :white_check_mark: * [dba2fd7](https://github.com/aemsites/piramal/commit/dba2fd7c1187d6f05f76a2845d0bd8f27a316264) :white_check_mark: * [da7a4b7](https://github.com/aemsites/piramal/commit/da7a4b701d0721bce8808034aac58ecaf2ed4aac) :white_check_mark:

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[asthabh23]

There are bunch of accessibility issues also on the carousel: https://pagespeed.web.dev/analysis/https-issue-4-1--piramal--aemsites-hlx-page/afe1j0hbfy?utm_source=psi&utm_medium=redirect&form_factor=mobile, which need a fix

@nawaz-adobe I created a separate issue for that https://github.com/aemsites/piramal/issues/89 you could pick that up once this is merged

[nawaz-adobe]

the content shifts to mobile like view even at 1100px around can you move that mobile view only. below looks odd a bit

the desktop view should remain till atleast tablet view.

@asthabh23 thanks for checking this.. i have matched css values from customer's 1024px breakpoint to our 900px (tablet landscape) breakpoint..

everything seems good, but we will need to take care of the following later:

1. adjust padding/margin on global level, so that the alignment, etc. matches with customer live website.
2. image sizes - i have added reasonable width/height for mobile, tablet & desktop.. but customer website has different size for different images even in same view. i will start a thread around this on the customer channel.

[nawaz-adobe]

added issue #93 for image size handling