Issue 4961 - Fix card group field alignment 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 410 matching lines @@
   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; }
+  margin-bottom: 96px; }
+  @media (max-width: 768px) {
+    .section {
+      margin-bottom: 32px; } }
 
 .section .section {
-  margin: 64px 0; }
+  margin-bottom: 64px; }
+  @media (max-width: 768px) {
+    .section .section {
+      margin-bottom: 32px; } }
 
 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; } }
+  @media (max-width: 544px) {
+    h1,
+    .h1 {
+      font-size: 26px;
+      margin-bottom: 44px; } }
 
 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: 24px;
+      margin-top: 32px; } }
+  @media (max-width: 544px) {
+    h2, .center blockquote,
+    .h2 {
+      font-size: 22px;
+      margin-bottom: 16px; } }
 
 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,
 .group.items .item h5,
 .group.items .item h6 .h1,
 h6 .group.items .item .h1,
 .group.items .item .h2,
 .group.items .item .h3,
 .group.items .item .h4,
 .group.items .item .h5,
 .group.items .item .h6 {
   margin: 64px 0 32px 0;
   font-size: 22px;
   font-weight: 700; }
+  @media (max-width: 768px) {
+    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,
+    .group.items .item h5,
+    .group.items .item h6 .h1,
+    h6 .group.items .item .h1,
+    .group.items .item .h2,
+    .group.items .item .h3,
+    .group.items .item .h4,
+    .group.items .item .h5,
+    .group.items .item .h6 {
+      font-size: 20px;
+      margin-top: 32px; } }
+  @media (max-width: 544px) {
+    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,
+    .group.items .item h5,
+    .group.items .item h6 .h1,
+    h6 .group.items .item .h1,
+    .group.items .item .h2,
+    .group.items .item .h3,
+    .group.items .item .h4,
+    .group.items .item .h5,
+    .group.items .item .h6 {
+      margin-bottom: 16px; } }
 
 h4,
 .h4 {
   margin: 32px 0 16px 0;
   font-size: 20px;
   font-weight: 700; }
+  @media (max-width: 544px) {
+    h4,
+    .h4 {
+      font-size: 18px; } }
 
 h5, .card.list h1, .card.list h2, .card.list .center blockquote, .center .card.list blockquote, .card.list h3, .card.list .group.items .item::before, .group.items .card.list .item::before, .card.list h4, .card.list h5, .card.list h6 .h1, h6 .card.list .h1, .card.list .h2, .card.list .h3, .card.list .h4, .card.list .h5, .card.list .h6, #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,
 .h5 {
   margin: 16px 0;
   font-size: 18px; }
+  @media (max-width: 544px) {
+    h5, .card.list h1, .card.list h2, .card.list .center blockquote, .center .card.list blockquote, .card.list h3, .card.list .group.items .item::before, .group.items .card.list .item::before, .card.list h4, .card.list h5, .card.list h6 .h1, h6 .card.list .h1, .card.list .h2, .card.list .h3, .card.list .h4, .card.list .h5, .card.list .h6, #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,
+    .h5 {
+      font-size: 16px; } }
 
 h6,
 .h6 {
   margin: 16px 0;
   font-size: 18px;
   font-weight: 400; }
+  @media (max-width: 544px) {
+    h6,
+    .h6 {
+      font-size: 16px; } }
 
 html,
 body {
   color: #161616;
   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-size: 18px;
   font-weight: 300;
   line-height: 120%; }
+  @media (max-width: 544px) {
+    html,
+    body {
+      font-size: 16px; } }
 
 small,
 .small {
   margin-bottom: 8px;
   font-size: 70%;
   line-height: 80%; }
 
 blockquote,
 p,
 ul,
@@ skipping 91 matching lines @@
 dt {
   margin: 16px 0; }
 
 dd {
   margin: 16px 0 32px 0; }
 
 dt {
   font-size: 20px;
   text-transform: uppercase;
   font-weight: 700; }
+  @media (max-width: 768px) {
+    dt {
+      font-size: 18px; } }
 
 blockquote {
   margin: 0;
   padding: 0 32px;
   text-transform: uppercase;
   font-size: 18px;
   font-weight: 400;
   font-style: italic; }
 
 html[dir="ltr"] blockquote {
   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 27 matching lines @@
   width: 24px;
   height: 3px;
   margin: 16px 0;
   border: none;
   background-color: #161616; }
 
 h1 + hr,
 h2 + hr, .center blockquote + hr {
   position: absolute;
   margin: -32px 0 32px 0; }
+  @media (max-width: 544px) {
+    h1 + hr,
+    h2 + hr, .center blockquote + hr {
+      margin-top: -21px; } }
 
 .center hr {
   margin: 16px auto; }
 
 table {
   border-collapse: collapse !important; }
 
 table td,
 table th {
   background-color: #FFFFFF; }
@@ skipping 83 matching lines @@
 
 .inline-buttons {
   margin-top: 64px;
   margin-bottom: 64px;
   text-align: right; }
 
 @media (min-width: 544px) {
   .inline-buttons a,
   .inline-buttons input {
     margin-left: 16px; } }
+
+.btn-container {
+  margin-top: 16px;
+  margin-bottom: 16px; }
+  @media (min-width: 544px) {
+    .btn-container {
+      margin-top: 32px;
+      margin-bottom: 32px; } }
+  @media (min-width: 768px) {
+    .btn-container {
+      margin-top: 64px;
+      margin-bottom: 64px; } }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea,
 select {
@@ skipping 145 matching lines @@
 
 .card {
   padding: 32px;
   color: #161616;
   border: 1px solid #161616;
   background-color: #FFFFFF; }
 
 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
   height: 48px;
   margin: 16px 0 16px 0; }
-
-.card article .card-heading {
-  height: auto; }
-  @media (min-width: 700px) {
-    .card article .card-heading {
-      height: 120px; } }
+  @media (max-width: 544px) {
+    .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
+      height: auto; } }
 
 .card-icon {
   margin: 16px 0; }
 
 .center .card-icon {
   margin: 48px 0 32px 0; }
+  @media (max-width: 768px) {
+    .center .card-icon {
+      margin-top: 32px; } }
+  @media (max-width: 544px) {
+    .center .card-icon {
+      margin-top: 16px; } }
 
 img.card-icon,
 .card-icon img {
   height: 48px; }
 
 .card img.block {
   margin: 0; }
 
 .card-summary {
   margin: 32px 0;
   height: 64px; }
+  @media (max-width: 544px) {
+    .card-summary {
+      margin: 16px;
+      height: auto; } }
 
 .card button, .card input[type="button"], .card input[type="reset"], .card input[type="submit"], .card .btn-outline-primary, .card .btn-outline-accent, .card .btn-primary, .card .btn-accent {
   display: block;
   width: 100%;
   margin-bottom: -8px; }
 
 .card li::before {
   width: 32px;
   text-align: left; }
 
@@ skipping 27 matching lines @@
   margin: 8px 0;
   padding: 4px 0;
   border-bottom: 1px dotted #8CC63E; }
 
 .card.list a {
   text-decoration: none;
   color: #161616; }
 
 .card.list a:hover, .card.list a:active {
   color: #8CC63E; }
-
-@supports (display: grid) {
-  .group .card {
-    width: 100%;
-    grid-template-rows: auto 1fr auto; }
-  @media all {
-    .group .card .card-summary {
-      height: auto; } }
-  .card-footer .m-t-md {
-    margin-top: 0 !important; } }
 
 .items {
   counter-reset: group; }
 
 .item {
   position: relative;
   padding-left: 1.5em; }
 
 .items .item::before {
   display: block;
   position: absolute;
   top: 0;
   width: 1.5em;
   content: counter(group, decimal-leading-zero);
   counter-increment: group;
   color: #8CC63E; }
 
 html[dir="ltr"] .items .item::before {
   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 105 matching lines @@
 
 @media (max-width: 544px) {
   .group > div {
     width: 100%; }
   .group > div:nth-child(4),
   .group > div:nth-child(3),
   .group > div:nth-child(5) {
     margin-left: 0; } }
 
 @supports (display: grid) {
-  .group {
+  .group.cards {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
-  .group .card {
-    display: inline-grid; }
+    grid-template-columns: repeat(1, 1fr); }
+    @media (min-width: 350px) {
+      .group.cards {
+        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } }
+  .group.cards .card {
+    display: inline-grid;
+    width: 100%;
+    grid-template-rows: auto 1fr auto; }
+  .group.cards .card-summary {
+    height: auto; }
   @media (min-width: 992px) {
-    .group-4 {
+    .group-4.cards {
       grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } }
+  @media (min-width: 768px) {
+    .group-5.cards {
+      grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } }
   @media (min-width: 992px) {
-    .group-5 {
+    .group-5.cards {
       grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } }
-  @media all {
-    .group-5 > div:nth-child(4) {
-      margin-left: 0; } } }
+  .group-5.cards > div:nth-child(4),
+  .group-5.cards > div:nth-child(5) {
+    margin-left: 0; }
+  @media (min-width: 768px) and (max-width: 991px) {
+    .group-5.cards > div:nth-child(4) {
+      margin-left: 50%; } }
+  @media (min-width: 700px) and (max-width: 991px) {
+    .group-5.cards > div:nth-child(5) {
+      margin-left: 50%; } } }
 
 .masthead-img > img {
   width: 100%;
   margin: 32px 0; }
 
 @media (max-width: 767px) {
   .masthead.bg-info {
     background-color: #FFFFFF; } }
 
 @media (min-width: 768px) {
   .masthead-body > div {
     margin-top: 96px;
     margin-bottom: 96px; } }
 
 @media (max-width: 767px) {
   .masthead-body h1 {
     margin-top: 32px; } }
 
 @media (max-width: 767px) {
   .masthead .container {
     padding: 0; }
   .col-6.masthead-body {
     padding: 16px 32px; }
   .masthead-img img {
     padding: 32px 16px 0 16px;
     margin: 0; } }
 
 .footnote {
   margin-top: 64px; }
+  @media (max-width: 768px) {
+    .footnote {
+      margin-top: 32px; } }
 
 .footnote-ref {
   font-weight: 700;
   font-size: 12px; }
 
 .footnote li > p {
   margin: 0;
   display: inline-block; }
 
 #navbar {
   width: 100%;
   height: 64px;
   padding: 0 32px;
   background-color: #FFFFFF;
   line-height: 64px; }
   #navbar img {
     height: 16px;
     margin: 0; }
 
 .js #navbar {
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0; }
 
+.site-title {
+  margin: 0;
+  font-size: 17px;
+  line-height: 64px;
+  word-spacing: -2px; }
+
+.site-title a {
+  color: #161616;
+  text-decoration: none;
+  font-weight: 300; }
+
+.site-title a strong {
+  font-weight: 400; }
+
 @media (min-width: 1200px) {
-  html[dir="rtl"] #navbar-logo {
+  html[dir="rtl"] .site-title {
     margin-right: 208px; }
-  html[dir="ltr"] #navbar-logo {
+  html[dir="ltr"] .site-title {
     margin-left: 208px; } }
 
 @media (max-width: 1199px) {
   .js #navbar {
     display: none; } }
 
 #sidebar {
   text-transform: uppercase;
   color: #FFFFFF;
   background-color: #161616;
   font-size: 16px;
   font-weight: 400;
   line-height: 100%; }
   #sidebar ul,
   #sidebar li {
     margin: 0;
     padding: 0;
     text-align: inherit; }
-  #sidebar a,
-  #sidebar a:hover,
-  #sidebar a:active {
-    display: block;
-    text-decoration: none;
-    color: inherit; }
   #sidebar #sidebar-brand {
     height: 64px;
     line-height: 64px; }
   #sidebar #sidebar-logo {
     display: block;
     padding: 0 32px;
     text-align: inherit;
     background-color: #8CC63E; }
     #sidebar #sidebar-logo img {
       width: 32px;
       height: 32px;
       vertical-align: middle; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
-  #sidebar #sidebar-title {
+  #sidebar .site-title {
     display: none; }
   #sidebar #sidebar-close img {
     width: 20px;
     height: 20px; }
   #sidebar #sidebar-open img {
     width: 36px;
     height: 18px; }
+
+#sidebar-menus a,
+#sidebar-menus a:hover,
+#sidebar-menus a:active {
+  display: block;
+  text-decoration: none;
+  color: inherit; }
 
 @media (min-width: 1200px) {
   #sidebar {
     position: absolute;
     top: 0;
     width: 208px; }
   .js #sidebar {
     position: fixed;
     z-index: 2;
     height: 100%; }
@@ skipping 12 matching lines @@
     left: 0;
     overflow: hidden;
     width: 100%;
     height: 64px; }
   .js #sidebar.open {
     height: 100%; }
   html[dir="ltr"].js #sidebar {
     text-align: left; }
   html[dir="rtl"].js #sidebar {
     text-align: right; }
-  #sidebar #sidebar-title,
+  #sidebar .site-title,
   #sidebar #sidebar-open {
     display: block; }
   #sidebar.open #sidebar-open {
     display: none; }
   #sidebar.open #sidebar-close {
     display: block; }
   #sidebar #sidebar-brand {
     background-color: #FFFFFF; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
   #sidebar #sidebar-logo,
-  #sidebar #sidebar-title {
+  #sidebar .site-title {
     padding: 0 16px; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
-  #sidebar #sidebar-title {
+  #sidebar .site-title {
     height: 64px;
     line-height: 64px; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close {
     width: 64px;
     min-width: 64px;
     margin: 0;
     color: #FFFFFF;
     border: none;
     background-color: #161616;
     font-size: 32px; }
-  #sidebar #sidebar-title img {
-    display: inline-block;
-    height: 16px;
-    vertical-align: middle; }
   html[dir="ltr"] #sidebar-open,
   html[dir="ltr"] #sidebar-close,
   html[dir="ltr"] #sidebar-logo,
-  html[dir="ltr"] #sidebar-title {
+  html[dir="ltr"] #sidebar .site-title {
     float: left; }
   html[dir="rtl"] #sidebar-open,
   html[dir="rtl"] #sidebar-close,
   html[dir="rtl"] #sidebar-logo,
-  html[dir="rtl"] #sidebar-title {
+  html[dir="rtl"] #sidebar .site-title {
     float: right; } }
 
 #primary-navigation li {
   position: relative; }
 
 #primary-navigation ul ul li {
   color: #8CC63E;
   font-size: 14px; }
 
 #primary-navigation .active > a {
@@ skipping 165 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; } }
+  @media (max-width: 544px) {
+    #footer {
+      padding-top: 16px;
+      padding-bottom: 16px; } }
   #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; }
+    @media (max-width: 544px) {
+      #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 {
+        margin-bottom: 16px; } }
   #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; }