Separate public page pattern layout from components

styleguide.css

@@ -25,3 +25,4 @@
 @import "./styles/42-components-data-display.css";
 @import "./styles/43-components-typography.css";
 @import "./styles/44-components-public-page-components.css";
+@import "./styles/45-patterns-public-page-patterns.css";

styles/44-components-public-page-components.css

@@ -73,12 +73,6 @@
   width: 100%;
 }
 
-.sg-page-public-page-patterns .sg-preview-area {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
 @media (max-width: 48rem) {
   .sg-text-block,
   .sg-card--call-to-action-card {

styles/45-patterns-public-page-patterns.css

@@ -0,0 +1,9 @@
+/* ========================================================= */
+/* Patterns: Public Page Patterns                            */
+/* ========================================================= */
+
+.sg-page-public-page-patterns .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}