Fix text-layout pattern viewport overflow

styles/31-patterns-text-layouts.css

@@ -10,6 +10,7 @@
 
 .sg-text-layout-pattern__preview-surface {
   width: 100%;
+  box-sizing: border-box;
   padding: var(--spacing-large);
   border-radius: var(--radius-card);
   background: var(--surface-text-layout-preview);
@@ -33,6 +34,7 @@
 
 .sg-text-layout-pattern__two-column {
   width: 100%;
+  min-width: 0;
   display: grid;
   grid-template-columns: var(--layout-text-layout-two-column-columns);
   column-gap: var(--layout-text-layout-column-gap);
@@ -40,6 +42,7 @@
 
 .sg-text-layout-pattern__three-column-distributed {
   width: 100%;
+  min-width: 0;
   display: grid;
   grid-template-columns: var(--layout-text-layout-three-column-columns);
   column-gap: var(--layout-text-layout-column-gap);
@@ -47,6 +50,7 @@
 
 .sg-text-layout-pattern__column {
   margin: 0;
+  min-width: 0;
 }
 
 .sg-text-layout-pattern__column--align-left {
@@ -78,4 +82,3 @@
     grid-template-columns: var(--layout-text-layout-three-column-columns);
   }
 }
-