Tabs with different backgrounds on each panel

[rusmeenkhan1]

There are 3 parts to this ticket that can be made into sub-tickets if needed

Intro
https://www.sling.com/international/desi-tv

See each tab has a different full width background color.

• Part 1 - Adding the background image to the right tabs-panel

Suggested approach:
See last tabs example for how to author in https://main--sling--aemsites.aem.page/library/blocks/tabs .

• Create logic that looks for p + picture as the 1st child of the 1st column
• append the picture's img > src as an inline style to the corresponding div.tabs-panel (and remove the p + picture)
• Tip: notice that the button.div.tabs-tab's id and the corresponding div.tabs-panel's id are already appended with the textContent of the 1st column, so you can probably add the inline style at the same time.
• also add some styles for that background in the CSS* so it looks like this:
  style="background: no-repeat center / cover url(./media_1178fbe0c69bec8471766c48b620cd3c22997bba4.png?width=750&format=png&optimize=medium);"

• see https://developer.mozilla.org/en-US/docs/Web/CSS/background for reference

• Part 2 - apply tabs variant of (white-text) to make all the text in the tabs panel white?

• See what we are already doing for this in sections styles for inspiration at https://github.com/aemsites/sling/blob/main/aemedge/styles/styles.css#L770

• you'll need to create a new .white-text selector in tabs.css for making all headings, p, li, and a tags white

• Part 3 - make the background of tab overextend the tab's width with CSS.
  Don't rely on the library page to test this, because there's not a max width on the container like there is on a real page such as the FAQ section of https://main--sling--aemsites.aem.page/programming/sports/soccer .

This CSS can be added to.tabs .tabs-panelwhether there is a background or not.
For media query widths under 768px, this seems to work well:

    width: 100vw;
    margin-left: calc(-100vw + 111%);
    padding-right: 32px;

For over 768px wide media query change 111% to 100%:

    margin-left: calc(-100vw + 100%);