#7527533 Add Product Lightbox styling

Proposed Changes

This PR adds Styling for the LightBox for Product Cards. It has hardcoded content, so it would be the same for each card. The most accent is done for responsiveness and following the designs.

Testing Instructions

Please test designs thorough on different screens (desktop/mobile, portrait/landscape). I would also appreciate any suggestions regarding improving CSS if needs one. Please don’t look into content and it’s behavior.

• Run git fetch && git checkout update/jetpack-product-lightbox-product-data
  • Run yarn start-jetpack-cloud
  • Go to http://jetpack.cloud.localhost:3000/pricing?flags=jetpack/pricing-page-product-lightbox

OR

• use the jetpack cloud live link and goto `/pricing?flags=jetpack/pricing-page-product-lightbox

• On product cards click on the question mark button at the bottom right of the card and observe the styling of the lightbox.

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

Related to #
1202796695664022-as-1202900224232205/f

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1202900224232205