Fix some visual issues with icon card variation

hlxsites · Sep 4, 2024 · 65a9502 · 65a9502
1 parent bcd0175
commit 65a9502
Showing 1 changed file with 25 additions and 9 deletions.
diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css
@@ -18,6 +18,8 @@
 
 .cards.block.mobile-slide .cards-list {
   flex-flow: row nowrap;
+  align-items: stretch;
+  gap: 20px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;  /* Firefox */
@@ -99,7 +101,7 @@
 
 .cards.block.mobile-slide .cards-item .card-body {
   padding: 0 30px;
-  height: 90px;
+  min-height: 90px;
 }
 
 .cards.block.mobile-slide .cards-item .card-body h4,
@@ -143,12 +145,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  min-width: 250px;
   flex: 0 0 auto;
-  margin-right: 20px;
   text-align: center;
   border: 1px solid var(--secondary-accent);
-  height: 100%;
   scroll-snap-align: start;
 }
 
@@ -162,13 +161,11 @@
 }
 
 .cards.block.mobile-slide.icons .cards-list .cards-item {
-  flex-direction: column;
-  width: 90%;
+  width: 75%;
 }
 
 .cards.block.icons .cards-list .cards-item .card-icon {
   margin-top: .5em;
-  margin-right: 1em;
 }
 
 .cards.block.icons .cards-list .cards-item .card-icon .icon {
@@ -191,7 +188,7 @@
 
 .cards.block.icons .cards-list .cards-item .card-body p {
   color: var(--body-color);
-  font-size: var(--body-font-size-s);
+  font-size: var(--body-font-size-xs);
   letter-spacing: var(--letter-spacing-xs);
   margin-bottom: 0;
 }
@@ -248,7 +245,8 @@
   }
 
   .cards.block.mobile-slide .cards-list {
-    flex-flow: column unset;
+    flex-flow: column;
+    align-items: center;
     overflow-x: unset;
   }
 
@@ -264,10 +262,20 @@
     border-bottom: 1px solid var(--secondary-medium-grey);
   }
 
+  .cards.block.mobile-slide .cards-list .cards-item:last-of-type {
+    border-bottom: none;
+  }
+
   .cards.block.mobile-slide.icons .cards-list .cards-item {
     flex-direction: row;
   }
 
+  .cards.block.icons .cards-list .cards-item .card-icon {
+    margin-top: .5em;
+    margin-right: 1em;
+  }
+
+
   .cards.block.shade-icon .cards-list {
     flex-direction: row;
     column-gap: 20px;
@@ -330,6 +338,10 @@
     font-size: var(--heading-font-size-xs);
   }
 
+  .cards.block.cards-2-cols .cards-list .cards-item {
+    flex: 0 1 calc(50% - 10px);
+  }
+
   .cards.block.cards-2-cols .cards-list .cards-item .card-image picture {
     padding-bottom: 45%;
   }
@@ -353,6 +365,10 @@
     padding: 0 25px 54px;
   }
 
+  .cards.block.mobile-slide .cards-list .cards-item:last-of-type {
+    border-bottom: 1px solid var(--secondary-medium-grey);
+  }
+
 }
 
 @media (min-width: 1200px) {