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 927 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 h1, .card article h2, .card article .center blockquote, .card .center article blockquote, .center .card article blockquote, .card article h3, .card article h4, .card article h5, .card article h6 .h1, .card h6 article .h1, h6 .card article .h1, .card article .h2, .card article .h3, .card article .h4, .card article .h5, .card article .h6, .card article .group.items .item::before, .group.items .card article .item::before {
+  height: auto; }
+  @media (min-width: 700px) {
+    .card article h1, .card article h2, .card article .center blockquote, .card .center article blockquote, .center .card article blockquote, .card article h3, .card article h4, .card article h5, .card article h6 .h1, .card h6 article .h1, h6 .card article .h1, .card article .h2, .card article .h3, .card article .h4, .card article .h5, .card article .h6, .card article .group.items .item::before, .group.items .card article .item::before {
+      height: 120px; } }
+
 .card-icon {
   margin: 16px 0; }
 
 .center .card-icon {
   margin: 48px 0 32px 0; }
 
 img.card-icon,
 .card-icon img {
   height: 48px; }
 
@@ skipping 44 matching lines @@
   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) {
+  .card {
+    display: inline-grid; } }
+
 .items {
   counter-reset: group; }
 
 .item {
   position: relative;
   padding-left: 1.5em; }
 
 .items .item::before {
   display: block;
   position: absolute;
@@ skipping 147 matching lines @@
     margin-left: 0; } }
 
 @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 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
+  @media (min-width: 992px) {
+    .group-4 {
+      grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } }
+  .group-4 > div {
+    width: 100%; } }
+
 .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 {
@@ skipping 361 matching lines @@
     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; }