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 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 {
@@ -1004,16 +1010,20 @@
 
 .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 {
@@ -1171,16 +1181,26 @@
 @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; } }