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 .card-heading {
+  height: auto; }
+  @media (min-width: 700px) {
+    .card article .card-heading {
+      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) {
+  .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;
@@ 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)); }
+  .group .card {
+    display: inline-grid; }
+  @media (min-width: 992px) {
+    .group-4 {
+      grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } }
+  @media (min-width: 992px) {
+    .group-5 {
+      grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } }
+  @media all {
+    .group-5 > div:nth-child(4) {
+      margin-left: 0; } } }
+
 .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; }