Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com

static/css/main.css

 .m-a-na {
   margin: 0 0 !important; }
 
 .m-t-na {
   margin-top: 0 !important; }
 
 .m-b-na {
   margin-bottom: 0 !important; }
 
 .m-x-na {
@@ skipping 403 matching lines @@
   width: 100%;
   margin-bottom: 16px;
   padding: 0;
   font-size: 18px;
   line-height: inherit; }
 
 a, img {
   border: none;
   outline: none; }
 
-h2 + .row, .center blockquote + .row,
-h1 + .row,
-h2 + hr + .row, .center blockquote + hr + .row,
-h1 + hr + .row {
-  margin-top: -16px; }
-
 .section {
   margin: 96px 0; }
+  @media (max-width: 768px) {
+    .section {
+      margin: 32px 0; } }
 
 .section .section {
   margin: 64px 0; }
 
 h1, h2, .center blockquote, h3, .group.items .item::before, h4, h5, h6 .h1, .h2, .h3, .h4, .h5, .h6 {
   text-transform: uppercase;
   font-weight: 700;
   line-height: 120%; }
 
 h1,
 .h1 {
   margin: 96px 0 64px 0;
   text-transform: none;
   font-size: 42px;
   font-weight: 300; }
+  @media (max-width: 768px) {
+    h1,
+    .h1 {
+      font-size: 30px;
+      margin-top: 32px; } }
 
 h2, .center blockquote,
 .h2 {
   margin: 64px 0 32px 0;
   font-size: 28px;
   font-weight: 700; }
+  @media (max-width: 768px) {
+    h2, .center blockquote,
+    .h2 {
+      font-size: 22px;
+      margin: 32px 0 32px 0; } }
 
 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6, .group.items .item::before,
 .h3,
 .group.items .item h1,
 .group.items .item h2,
 .group.items .item .center blockquote,
 .center .group.items .item blockquote,
 .group.items .item h3,
 .group.items .item .item::before,
 .group.items .item h4,
@@ skipping 157 matching lines @@
   border-left: 4px solid #E1E1E1; }
 
 html[dir="rtl"] blockquote {
   border-right: 4px solid #E1E1E1; }
 
 html .center blockquote {
   border: none; }
 
 .center blockquote {
   margin: 0;
-  padding: 96px 0;
+  padding: 64px 0;
   font-style: normal; }
+  @media (max-width: 768px) {
+    .center blockquote {
+      font-size: 22px;
+      padding: 32px 0; } }
 
 .center blockquote p:last-child {
   margin-top: -8px; }
 
 cite {
   font-size: 14px;
   font-style: normal; }
 
 cite::before {
   content: "-- "; }
@@ skipping 208 matching lines @@
   min-height: 1px;
   padding-right: 16px;
   padding-left: 16px; }
 
 html[dir="ltr"] .row .col-3, html[dir="ltr"] .row .col-4, html[dir="ltr"] .row .col-5, html[dir="ltr"] .row .col-6, html[dir="ltr"] .row .col-7, html[dir="ltr"] .row .col-8, html[dir="ltr"] .row .col-9 {
   float: left; }
 
 html[dir="rtl"] .row .col-3, html[dir="rtl"] .row .col-4, html[dir="rtl"] .row .col-5, html[dir="rtl"] .row .col-6, html[dir="rtl"] .row .col-7, html[dir="rtl"] .row .col-8, html[dir="rtl"] .row .col-9 {
   float: right; }
 
+@media (max-width: 991px) {
+  .row .col-3, .row .col-4, .row .col-5, .row .col-6, .row .col-7, .row .col-8, .row .col-9 {
+    padding-top: 8px;
+    padding-bottom: 8px; } }
+
 @media (min-width: 544px) {
   .col-3 {
     width: 50%; }
   html[dir="ltr"] .push-3 {
     left: 50%; }
   html[dir="ltr"] .pull-3 {
     right: 50%; }
   html[dir="rtl"] .push-3 {
     right: 50%; }
   html[dir="rtl"] .pull-3 {
@@ skipping 159 matching lines @@
   left: 0; }
 
 html[dir="rtl"] .items .item::before {
   right: 0; }
 
 .group-container {
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
   padding: 96px 0; }
+  @media (max-width: 992px) {
+    .group-container {
+      padding: 8px; } }
 
 .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6,
 .group-container > p {
-  margin: 96px auto;
+  margin: 64px auto;
   padding: 0 16px; }
 
+@media (max-width: 992px) {
+  .group-container > p {
+    margin: 32px auto; } }
+
 .group {
   display: table;
   width: 100%;
   table-layout: fixed; }
 
 .group-container .group {
   margin-bottom: 0; }
 
 .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6 {
   margin-top: 0; }
+  @media (max-width: 992px) {
+    .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6 {
+      margin: 32px auto; } }
 
 .group .card,
 .group .item {
   display: table-cell;
   vertical-align: top; }
 
 .group.items .item::before {
   margin-top: 16px;
   text-align: center;
   width: 45px; }
@@ skipping 457 matching lines @@
     padding-left: 208px; }
   html[dir="rtl"] .outer {
     padding-right: 208px; } }
 
 #footer {
   padding-top: 64px;
   padding-bottom: 96px;
   font-size: 70%;
   background-color: #292929;
   color: #FFFFFF; }
+  @media (max-width: 768px) {
+    #footer {
+      padding-top: 32px;
+      padding-bottom: 64px; } }
   #footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote, #footer h3, #footer .group.items .item::before, .group.items #footer .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6 {
     position: relative;
     margin-bottom: 32px;
     padding-top: 8px; }
   #footer h1::before, #footer h2::before, #footer .center blockquote::before, .center #footer blockquote::before, #footer h3::before, #footer .group.items .item::before, .group.items #footer .item::before, #footer h4::before, #footer h5::before, #footer h6 .h1::before, h6 #footer .h1::before, #footer .h2::before, #footer .h3::before, #footer .h4::before, #footer .h5::before, #footer .h6::before {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 16px;
     height: 0;
     content: " ";
     border-top: 2px solid #FFFFFF; }
   #footer a {
     color: #FFFFFF; }
   #footer a:hover {
     text-decoration: underline;
     color: #8CC63E !important; }
   #footer p {
     color: #E1E1E1; }