Improve cards

blocks/cards/cards.css

@@ -1,27 +1,52 @@
-.cards > ul {
+.cards__list {
+  display: grid;
+  grid-gap: 24px;
   list-style: none;
   margin: 0;
   padding: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
-  grid-gap: 24px;
-}
 
-.cards > ul > li {
-  border: 1px solid #dadada;
-  background-color: var(--background-color);
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  }
+
+  .cards--2-column & {
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .cards--3-column & {
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  & > li {
+    background-color: var(--background-color);
+    border-radius: 6px;
+    border: 1px solid var(--col-neutral30);
+    overflow: hidden;
+  }
 }
 
-.cards .cards-card-body {
-  margin: 16px;
+.cards__card-body {
+  margin: 24px;
+
+  *:first-child {
+    margin-top: 0;
+  }
+
+  *:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.cards .cards-card-image {
+.cards__card-image {
   line-height: 0;
-}
 
-.cards > ul > li img {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-}
+  img {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+  }
+}

blocks/cards/cards.js

@@ -1,14 +1,23 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
+import { createElement, variantsClassesToBEM } from '../../scripts/common.js';
+
+const variantClasses = ['2-column', '3-column'];
 
 export default function decorate(block) {
+  const blockName = 'cards';
+
+  variantsClassesToBEM(block.classList, variantClasses, blockName);
+
   /* change to ul, li */
-  const ul = document.createElement('ul');
+  const ul = createElement('ul', {
+    classes: `${blockName}__list`,
+  });
   [...block.children].forEach((row) => {
     const li = document.createElement('li');
     while (row.firstElementChild) li.append(row.firstElementChild);
     [...li.children].forEach((div) => {
-      if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
-      else div.className = 'cards-card-body';
+      if (div.children.length === 1 && div.querySelector('picture')) div.className = `${blockName}__card-image`;
+      else div.className = `${blockName}__card-body`;
     });
     ul.append(li);
   });