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
@@ -1047,16 +1047,22 @@
 
 .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; } }
@@ -1298,16 +1304,48 @@
 @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; }
+  .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)); } }
+  .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; } }