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: 768px) {
+    .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 {
@@ -1030,21 +1036,21 @@
 
 html[dir="rtl"] .items .item::before {
   right: 0; }
 
 .group-container {
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
-  padding: 32px 0; }
+  padding: 96px 0; }
 
 .group-container > h1, .group-container > h2, .center .group-container > blockquote, .group-container > h3, .group.items .group-container > .item::before, .group-container > h4, .group-container > h5, h6 .group-container > .h1, .group-container > .h2, .group-container > .h3, .group-container > .h4, .group-container > .h5, .group-container > .h6,
 .group-container > p {
-  margin: 32px auto;
+  margin: 96px auto;
   padding: 0 16px; }
 
 .group {
   display: table;
   width: 100%;
   table-layout: fixed; }
 
 .group-container .group {
@@ -1171,16 +1177,50 @@
 @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; } }
 
@@ -1224,34 +1264,20 @@
     margin: 0; }
 
 .js #navbar {
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0; }
 
-.site-title {
-  margin: 0;
-  font-size: 17px;
-  line-height: 64px;
-  word-spacing: -2px; }
-
-.site-title a {
-  color: #161616;
-  text-decoration: none;
-  font-weight: 300; }
-
-.site-title a strong {
-  font-weight: 400; }
-
 @media (min-width: 1200px) {
-  html[dir="rtl"] .site-title {
+  html[dir="rtl"] #navbar-logo {
     margin-right: 208px; }
-  html[dir="ltr"] .site-title {
+  html[dir="ltr"] #navbar-logo {
     margin-left: 208px; } }
 
 @media (max-width: 1199px) {
   .js #navbar {
     display: none; } }
 
 #sidebar {
   text-transform: uppercase;
@@ -1260,46 +1286,45 @@
   font-size: 16px;
   font-weight: 400;
   line-height: 100%; }
   #sidebar ul,
   #sidebar li {
     margin: 0;
     padding: 0;
     text-align: inherit; }
+  #sidebar a,
+  #sidebar a:hover,
+  #sidebar a:active {
+    display: block;
+    text-decoration: none;
+    color: inherit; }
   #sidebar #sidebar-brand {
     height: 64px;
     line-height: 64px; }
   #sidebar #sidebar-logo {
     display: block;
     padding: 0 32px;
     text-align: inherit;
     background-color: #8CC63E; }
     #sidebar #sidebar-logo img {
       width: 32px;
       height: 32px;
       vertical-align: middle; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
-  #sidebar .site-title {
+  #sidebar #sidebar-title {
     display: none; }
   #sidebar #sidebar-close img {
     width: 20px;
     height: 20px; }
   #sidebar #sidebar-open img {
     width: 36px;
     height: 18px; }
 
-#sidebar-menus a,
-#sidebar-menus a:hover,
-#sidebar-menus a:active {
-  display: block;
-  text-decoration: none;
-  color: inherit; }
-
 @media (min-width: 1200px) {
   #sidebar {
     position: absolute;
     top: 0;
     width: 208px; }
   .js #sidebar {
     position: fixed;
     z-index: 2;
@@ -1321,53 +1346,57 @@
     width: 100%;
     height: 64px; }
   .js #sidebar.open {
     height: 100%; }
   html[dir="ltr"].js #sidebar {
     text-align: left; }
   html[dir="rtl"].js #sidebar {
     text-align: right; }
-  #sidebar .site-title,
+  #sidebar #sidebar-title,
   #sidebar #sidebar-open {
     display: block; }
   #sidebar.open #sidebar-open {
     display: none; }
   #sidebar.open #sidebar-close {
     display: block; }
   #sidebar #sidebar-brand {
     background-color: #FFFFFF; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
   #sidebar #sidebar-logo,
-  #sidebar .site-title {
+  #sidebar #sidebar-title {
     padding: 0 16px; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
-  #sidebar .site-title {
+  #sidebar #sidebar-title {
     height: 64px;
     line-height: 64px; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close {
     width: 64px;
     min-width: 64px;
     margin: 0;
     color: #FFFFFF;
     border: none;
     background-color: #161616;
     font-size: 32px; }
+  #sidebar #sidebar-title img {
+    display: inline-block;
+    height: 16px;
+    vertical-align: middle; }
   html[dir="ltr"] #sidebar-open,
   html[dir="ltr"] #sidebar-close,
   html[dir="ltr"] #sidebar-logo,
-  html[dir="ltr"] #sidebar .site-title {
+  html[dir="ltr"] #sidebar-title {
     float: left; }
   html[dir="rtl"] #sidebar-open,
   html[dir="rtl"] #sidebar-close,
   html[dir="rtl"] #sidebar-logo,
-  html[dir="rtl"] #sidebar .site-title {
+  html[dir="rtl"] #sidebar-title {
     float: right; } }
 
 #primary-navigation li {
   position: relative; }
 
 #primary-navigation ul ul li {
   color: #8CC63E;
   font-size: 14px; }