Add tab carousel variant

[RitwikSrivastava]

Please always provide the GitHub issue(s) your PR is for, as well as test URLs where your change can be observed (before and after):

Fix #555

Test URLs:

• Before: https://main--sling--aemsites.aem.live/programming/max
• After: https://carouseltab--sling--aemsites.aem.page/programming/max

[aem-code-sync]

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

• 6f7db4f ✅ (latest)
• 1365fd7 ✅
• 8f7116b ✅
• 99286df ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/import-02-24/programming/max
🖥️	/drafts/import-02-24/programming/max

[helms-charity]

There are problems with the carousel slides when in this tab formation. Here were the in-browser edits I made that made the slide images look more similar to the original, and not cut off in tablet/desktop view:

Removed the object-fit and height/widths from the image element

Removed the height/width from the picture element

Removed height/width from the li element:

Removed max-width from the block div, and replaced with width: 66% to match the live site:

Then remove the 600px height, since we want that to be proportionate to the 66% width:

Mobile carousel has some work needed as-is too, though after applying the other suggested edits above, the adjustments will be different.

[RitwikSrivastava]

@helms-charity made changes to make it look as close as possible to live site in all views.

[helms-charity]

I think it is close enough :-)