SgExample Tweaks

[bstaruk]

Description

This branch contains a couple small tweaks to the SgExample organism that @pgregorova requested a couple days ago:

1. Reduce the horizontal padding for small devices from 3em to 2em
2. Modify the dark background option to only affect the component, and not the entire example

Motivation and Context

These changes are purely aesthetic and it's possible that we may decide as a team that they are not desirable or necessary. I would take no offense to that!

It's worth noting that I left the "dark-background" class on the SgExample tag, instead of moving it to the component itself. The reason for this is to keep the JSX tidy (utilize the FC class stack to apply it) and to allow for overrides to other child elements in the future without making non-CSS code changes.

How Has This Been Tested?

This branch only contains a couple CSS tweaks so it should be very safe to merge into develop, should we choose to proceed with it.

Screenshots (if appropriate):

Old implementation
New implementation

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[drolsen]

I don't have any reservation around if the dark background encompasses the full example or not, but do approve the spacing updates.

@CSKingMartin I know this feature was your addition, did you want to alter this in any way?