MWPW-135727: CSS for Quotes, Columns (#23)

* Adding CSS styles for columns, quote, and spot checked pages. Not restricting banner widths

* Adding some styles based on comment by Dennis regarding text cut off

* Additional cutoff issues

* Additional QA for mobile devices

* Additional QA for mobile devices, checking for desktop

styles/styles.css

@@ -93,6 +93,10 @@ main p picture img {
     margin-right: auto;
 }
 
+.section .columns.columns-table {
+  max-width: var(--grid-container-width);
+}
+
 .article-header .article-feature-image {
   padding: 0;
   margin: auto;
@@ -113,6 +117,19 @@ main p picture img {
   display: none;
 }
 
+.quote {
+  max-width: var(--grid-container-width);
+  margin: 0 auto;
+}
+
+.recommended-articles-small-content-wrapper .article-card .article-card-body {
+  padding: 1.5rem;
+}  
+
+.recommended-articles-small-content-wrapper .article-card .article-card-body h3 {
+  margin-bottom: 0;
+}  
+
 @media screen and (min-width: 600px) {
   body main {
     font-size: var(--body-font-size-l);
@@ -134,4 +151,28 @@ main p picture img {
     padding-left: 0;
     padding-right: 0;
   }
+
+  .quote {
+    max-width: var(--body-max-width);
+    margin: 0 auto;
+  }
+
+  .section .columns.columns-table {
+    max-width: var(--body-max-width);
+  }
+
+  .section .columns.contained {
+    max-width: var(--body-max-width);
+  }
+
+  .recommended-articles-small-content-wrapper .article-card .article-card-body h3 {
+    margin-bottom: 8px;
+  }  
+
+}
+
+@media screen and (min-width: 1200px) {
+  .recommended-articles-small-content-wrapper .article-card .article-card-body {
+    padding: 1.25rem;
+  }  
 }