Add mailpoet-automation-section-content to define a max-width for section content

[MAILPOET-4536]

mailpoet/assets/css/src/components-automation-listing/_sections.scss

@@ -11,6 +11,19 @@
 }
 
 .mailpoet-automation-section {
+  @include full-width;
+}
+
+.mailpoet-automation-white-background {
+  background: #fff;
+}
+
+.mailpoet-automation-section-content {
+  display: block;
+  margin: auto;
+  max-width: 1072px;
+  padding: 65px 0;
+
   h2 {
     font-size: 23px;
     font-weight: 400;
@@ -29,14 +42,10 @@
 }
 
 .mailpoet-automation-section-hero {
-  background: #fff;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-top: -20px;
-  padding: 65px;
-
-  @include full-width;
 
   h1 {
     font-size: 32px;
@@ -71,7 +80,7 @@
 }
 
 .mailpoet-section-templates {
-  padding: 48px 64px 48px 84px;
+  padding: 48px 0;
 
   .components-button {
     display: block;
@@ -129,13 +138,9 @@
 }
 
 .mailpoet-section-build-your-own {
-  background: #fff;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding: 64px;
-
-  @include full-width;
 
   ol {
     list-style: decimal-leading-zero inside;

mailpoet/assets/js/src/automation/sections/build-your-own-section.tsx

@@ -46,7 +46,8 @@ export function BuildYourOwnSection(): JSX.Element {
   const selectedItem = list.filter((item) => item.slug === itemOpen)[0];
 
   return (
-    <section className="mailpoet-automation-section mailpoet-section-build-your-own">
+    <section className="mailpoet-automation-section mailpoet-automation-white-background">
+      <div className="mailpoet-automation-section-content mailpoet-section-build-your-own">
         <div>
           <h2>{__('Build your own automation workflows', 'mailpoet')}</h2>
           <p>
@@ -79,6 +80,7 @@ export function BuildYourOwnSection(): JSX.Element {
           </ol>
         </div>
         <img src={selectedItem.image} alt={selectedItem.title} />
+      </div>
     </section>
   );
 }

mailpoet/assets/js/src/automation/sections/hero-section.tsx

@@ -9,7 +9,8 @@ export function HeroSection(): JSX.Element {
     [],
   );
   return (
-    <section className="mailpoet-automation-section mailpoet-automation-section-hero">
+    <section className="mailpoet-automation-section mailpoet-automation-white-background">
+      <div className="mailpoet-automation-section-content mailpoet-automation-section-hero">
         <div>
           <span className="mailpoet-automation-preheading">
             {__('Automations', 'mailpoet')}
@@ -36,6 +37,7 @@ export function HeroSection(): JSX.Element {
           src={`${MailPoet.cdnUrl}automation/sections/hero.png`}
           alt={__('Welcome', 'mailpoet')}
         />
+      </div>
     </section>
   );
 }

mailpoet/assets/js/src/automation/sections/templates-section.tsx

@@ -8,7 +8,8 @@ export function TemplatesSection(): JSX.Element {
   const templates = workflowTemplates.slice(0, 3);
 
   return (
-    <section className="mailpoet-automation-section mailpoet-section-templates">
+    <section className="mailpoet-automation-section">
+      <div className="mailpoet-automation-section-content mailpoet-section-templates">
         <h2>{__('Explore essentials', 'mailpoet')}</h2>
         <p>
           {__(
@@ -28,6 +29,7 @@ export function TemplatesSection(): JSX.Element {
         <Button variant="link" href={MailPoet.urls.automationTemplates}>
           {__('Browse all templates →', 'mailpoet')}
         </Button>
+      </div>
     </section>
   );
 }