product-overview fixes

assets/less/ascribe.less

@@ -231,76 +231,42 @@
         }
     }
 }
+
+
 .product-overview {
-    padding: 175px 0;
-    border-top: 1px solid @greyHr;
+    &:extend(.text-center, .subtemplate);
+    border-top: 0;
+    border-bottom: 25px solid @greyBg;
 
-    h1 {
-        .sectionHeader;
-    }
-    p {
-        .copyTextSmall;
-    }
+    h1 { font-size: @font-size-h3; }
 
-    &:nth-of-type(odd) {
-        img {
-            float: left;
-        }
-        .text-column {
-            float: right;
-        }
-    }
-    &:nth-of-type(even) {
-        img {
-            float: right;
-        }
-    }
-    .text-column {
-        width: 45%;
-    }
-    img {
-        max-width: 55%;
-    }
+    .grid,
+    p { margin-bottom: 0; }
 
+    .row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
 
-    &.small {
-        border-top: 0;
-        border-bottom: 25px solid @greyBg;
-        padding: 100px 0;
-
-        h1 {
-            font-size: 22px;
-            margin:0;
-        }
-        .text-column {
-            text-align: center;
+        @media (@screen-sm) {
+            flex-wrap: no-wrap;
         }
     }
 
-    @media screen and (max-width: @tabletWidth) {
-        padding: 100px 0;
-        &:first-of-type {
-            border-top: 0;
-        }
+    .grid { }
 
-        img {
-            max-width: 100%;
-            width: 55%;
-        }
-        .text-column {
-            text-align: center;
-        }
-    }
-    @media screen and (max-width: @phoneWidth) {
-        img {
-            display: none;
-        }
-        .text-column {
-            width: 100%;
+    @media (@screen-sm) {
+        &:nth-of-type(odd) {
+            .grid {
+                flex-direction: row-reverse;
+            }
         }
     }
 }
 
+
+
 .blue-box {
     &:extend(.text-center);
     padding: @spacer 0;

assets/less/ascribe/_subtemplates.less

@@ -3,13 +3,15 @@
     padding-top: @spacer;
     padding-bottom: @spacer;
 
-    @media (min-width: @tabletWidth) {
+    @media (@screen-sm) {
         padding-top: (@spacer * 2);
         padding-bottom: (@spacer * 2);
     }
 
     > .row { background-color: @white; }
 
+    &.grey > .row { background-color: transparent; }
+
     &.case-studies {
         padding: 0;
     }

assets/less/ascribe/_variables.less

@@ -38,7 +38,7 @@
 
 @line-height-base:    24px;
 @line-height-small:   22px;
-@line-height-large:   26px;
+@line-height-large:   28px;
 
 @text-color:          @greyText;
 

controller/classes/Subtemplate.php

@@ -272,13 +272,18 @@ class Subtemplate {
 
         $content    = get_sub_field('content');
 
-        $result = "<section class='subtemplate product-overview {$headingSize}'>
-                        <div class='row row--content'>
-                            <img src='{$imageUrl}' alt='{$imageAlt}'>
-                            <div class='text-column'>
-                                <h1 class='{$headingSize}'>{$subtemplateTitle}</h1>
-                                <div>{$content}</div>
-                            </div>
+        $result = "<section class='subtemplate product-overview'>
+                        <div class='row'>
+                            <article class='grid grid--gutters grid--full grid-small--half'>
+                                <figure class='grid__col grid__col--center'>
+                                    <img src='{$imageUrl}' alt='{$imageAlt}'>
+                                </figure>
+
+                                <div class='grid__col grid__col--center text-column'>
+                                    <h1 class='{$headingSize}'>{$subtemplateTitle}</h1>
+                                    <div>{$content}</div>
+                                </div>
+                            </article>
                         </div>
                     </section>";
         return $result;