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 1034 matching lines @@
   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; }
   @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 article .card-heading {
+  height: auto; }
+  @media (min-width: 768px) {
+    .card article .card-heading {
+      height: 120px; } }
+
 .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 {
@@ skipping 231 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.cards {
+    display: 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; }
+  @media all {
+    .group.cards .card-summary {
+      height: auto; } }
+  @media (min-width: 992px) {
+    .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.cards {
+      grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } }
+  @media all {
+    .group-5.cards > div:nth-child(4),
+    .group-5.cards > div:nth-child(5) {
+      margin-left: 0; } }
+  @media (min-width: 768px) and (max-width: 992px) {
+    .group-5.cards > div:nth-child(4) {
+      margin-left: 50%; } }
+  @media (min-width: 700px) and (max-width: 992px) {
+    .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 {
@@ skipping 386 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; }