Issue 4961 - Fix card group field alignment on acceptableads.com

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -940,16 +940,22 @@
   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 {
@@ -1004,16 +1010,26 @@
 
 .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 {
@@ -1171,16 +1187,32 @@
 @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; } }