feat: add cards

Author: artKozynets

blocks/cards/cards.css

@@ -1,34 +1,36 @@
-.cards-container .cards-wrapper {
-  margin-top: var(--spacing-xbig);
-}
-
-.cards-card-body strong {
-    font: var(--type-condensed-font-family);
-    font-weight: bolder;
-}
-
 .cards > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
   grid-gap: var(--spacing-medium);
 }
 
 .cards > ul > li {
-  border: var(--shape-border-width-1) solid var(--color-neutral-500);
-  background-color: var(--background-color);
+  background-color: var(--color-white);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  border-radius: var(--shape-border-radius-3);
+  overflow: hidden;
+}
+
+.cards > ul > li:hover {
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }
 
 .cards .cards-card-body {
-  margin: var(--spacing-small);
+  margin: 16px;
 }
 
 .cards .cards-card-image {
   line-height: 0;
 }
 
+.cards .cards-card-body > *:first-child {
+  margin-top: 0;
+}
+
 .cards > ul > li img {
   width: 100%;
   aspect-ratio: 4 / 3;