Page Layout Container Variants

Problem/Feature Description

The design system needs a family of layout containers for the marketing site. The site uses several distinct page sections — a standard centered content area, a wider full-bleed section for image galleries, and a banner-style strip with different horizontal padding. All three share the same vertical centering, position: relative, and auto margins, but differ in max-width and padding values.

Right now each page template copies and pastes the shared layout boilerplate, which means a spacing change in the base style has to be applied to every variant by hand. The engineer's goal is to define a base layout component and derive the variants from it so that the shared properties only live in one place.

Output Specification

Produce a Container.styles.js file that exports the base container and at least two size/layout variants. Each variant should clearly override only the properties that differ from the base. Also produce a minimal Container.component.js that imports and re-exports (or uses) the styled components, showing the intended import path for consuming code.