Update Table widget styles for better alignment and spacing

Author: yuramax

website/modules/asset/ui/src/scss/_table-widget.scss

@@ -1,11 +1,18 @@
+.sf-table-section {
+  display: flex;
+  flex-direction: column;
+}
+
 .sf-table-intro {
   margin-bottom: 40px;
   max-width: 800px;
-  
+  align-self: center;
+  width: 100%;
+
   h2 {
     margin-bottom: 20px;
   }
-  
+
   p {
     color: $gray-300;
   }
@@ -15,7 +22,8 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  
+  justify-content: center;
+
   @include breakpoint-medium {
     flex-direction: row;
     flex-wrap: wrap;
@@ -41,24 +49,28 @@
     &:not(:last-child) {
       border: 1px solid $gray-200;
     }
+
+    // prettier-ignore
     &:nth-child(3n+6) {
       border-top: none;
     }
+
     &:nth-child(4n) {
       border-top: none;
     }
+
+    // prettier-ignore
     &:nth-child(n+4) {
       border-top: none;
     }
-
   }
 }
 
 .sf-table-cell-title {
   font-weight: 700;
   font-size: 14px;
   color: $gray-500;
-  
+
   @include breakpoint-medium {
     font-size: 22px;
   }
@@ -69,7 +81,7 @@
   font-size: 18px;
   color: $gray-500;
   margin: 0;
-  
+
   @include breakpoint-medium {
     font-size: 22px;
   }
@@ -92,21 +104,20 @@
   }
 }
 
-
 .sf-table-link {
-  margin-top:24px;
-  
+  margin-top: 24px;
+
   a {
     color: $gray-300;
     text-decoration: underline;
     font-weight: 300;
     font-size: 11px;
-    
+
     &:hover {
       text-decoration: none;
     }
   }
   @include breakpoint-medium {
     margin-top: 32px;
   }
-} 
+}