@repobit/dex-system-design 0.23.86 → 0.23.88

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.88](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.87...@repobit/dex-system-design@0.23.88) (2026-07-16)
+
+### Bug Fixes
+
+* **DEX-1014:** card adjustments
+
+
+## [0.23.87](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.86...@repobit/dex-system-design@0.23.87) (2026-07-16)
+
+**Note:** Version bump only for package @repobit/dex-system-design
+
+
+
+
+
 ## [0.23.86](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.85...@repobit/dex-system-design@0.23.86) (2026-07-15)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.86",
+  "version": "0.23.88",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.82",
-    "@repobit/dex-store-elements": "1.4.74",
+    "@repobit/dex-store": "1.3.84",
+    "@repobit/dex-store-elements": "1.5.1",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "ddcfc7ea8d973a182c4e28a81db485c14fa63f97"
+  "gitHead": "971af131324acdf322e7a01fff6549cebeabeab2"
 }

package/src/components/cards/card.css.js

@@ -5,6 +5,7 @@ export default css`
     display: block;
     --background-card-grey: var(--color-neutral-25);
     --border-card-grey: var(--color-neutral-50);
+    --bd-card-cols: 4;
     max-width: 1290px;
     margin: 0 auto;
   }
@@ -16,6 +17,14 @@ export default css`
     display: block !important;
   }
 
+  ::slotted(bd-card-item) {
+    display: block;
+    width: var(--bd-card-width, 280px);
+    flex: 0 0 var(--bd-card-width, 280px);
+    min-width: 200px;
+    margin: 0 !important;
+  }
+
   .bd-section-title-s {
     font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-fontWeight-semibold);
@@ -55,19 +64,13 @@ export default css`
   }
 
   .bd-light-carousel-track-s {
-    position: relative;
-    padding: var(--spacing-0) var(--spacing-20);
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    z-index: 1;
-    display: grid;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 1.5rem;
     width: 100%;
     box-sizing: border-box;
-  }
-
-  .bd-light-carousel-track-s::-webkit-scrollbar {
-    display: none;
+    padding: 0;
   }
 
   .bd-light-box-s {
@@ -84,6 +87,8 @@ export default css`
     z-index: 2;
     font-family: var(--typography-fontFamily-sans);
     box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
   }
 
   .bd-light-box-blue {
@@ -96,6 +101,23 @@ export default css`
     text-align: center !important;
   }
 
+  .bd-light-box-center .bd-light-box-header-s {
+    align-items: center;
+  }
+
+  .bd-light-box-center .bd-light-title-badge-wrapper-s {
+    justify-content: center;
+  }
+
+  .bd-light-box-center .bd-card-content-wrapper {
+    align-items: center;
+    text-align: center;
+  }
+
+  .bd-light-box-center .bd-card-cta-wrapper {
+    justify-content: center;
+  }
+
   .bd-light-box-s h3 {
     font-size: var(--heading-xsmall);
     margin: var(--spacing-0) var(--spacing-8) var(--spacing-8) var(--spacing-0);
@@ -104,12 +126,6 @@ export default css`
     text-align: start;
   }
 
-  .bd-light-title-no-content h3 {
-    margin: var(--spacing-0) !important;
-    font-size: var(--heading-small) !important;
-    text-align: center;
-  }
-
   .bd-light-box-center h3 {
     text-align: center !important;
     margin: var(--spacing-0) var(--spacing-0) var(--spacing-8) var(--spacing-0) !important;
@@ -135,10 +151,6 @@ export default css`
     display: block;
   }
 
-  .bd-light-box-no-content .bd-light-icon-s {
-    margin: 0 !important;
-  }
-
   .bd-light-box-header-s {
     display: flex;
     flex-direction: column;
@@ -149,15 +161,6 @@ export default css`
     position: relative;
   }
 
-  .bd-light-box-no-content .bd-light-box-header-s {
-    margin: 0 !important;
-  }
-
-  .bd-light-box-header-center {
-    align-items: center !important;
-    padding-bottom: var(--spacing-16);
-  }
-
   .bd-light-title-badge-wrapper-s {
     display: flex;
     align-items: flex-start;
@@ -182,12 +185,6 @@ export default css`
     line-height: var(--typography-lineHeight-normal);
   }
 
-  .bd-light-title-no-content {
-    margin: 0 !important;
-    width: 100%;
-    justify-content: center;
-  }
-
   .bd-card-content-wrapper {
     flex: 1;
     display: flex;
@@ -207,60 +204,31 @@ export default css`
     display: none;
   }
 
-  @media (max-width: 1024px) {
-    .bd-light-box-s {
-      padding: 1.5em;
-    }
-
-    .bd-light-box-s h3 {
-      font-size: 1.1em;
-    }
-
-    .bd-light-box-s p {
-      font-size: 0.95em;
-    }
-
-    .bd-light-carousel-track-s {
-      grid-template-columns: repeat(2, 1fr) !important;
-    }
-  }
 
   @media (max-width: 768px) {
     .bd-light-carousel-track-s {
-      display: grid !important;
-      grid-template-columns: 1fr !important;
+      flex-direction: column;
       gap: var(--spacing-20);
-      overflow-x: hidden;
+      padding: 0;
+      align-items: stretch;
     }
 
-    .bd-light-box-s,
-    .bd-light-box-no-content {
-       width: clamp(200px, 100%, 300px);
+    ::slotted(bd-card-item) {
+      width: 100% !important;
       max-width: 100% !important;
+      flex: 0 0 auto !important;
       min-width: 0 !important;
       margin: 0 !important;
-      box-sizing: border-box !important;
     }
-  }
 
-  @media (max-width: 480px) {
     .bd-light-box-s {
-      padding: 1em;
-    }
-.bd-light-carousel-track-s{
-padding: 0 !important; }
-    .bd-light-box-s h3 {
-      font-size: 1em;
-    }
-
-    .bd-light-box-s p {
-      font-size: 0.9em;
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
+      flex: none !important;
+      margin: 0 !important;
+      box-sizing: border-box !important;
     }
   }
 
-  @media (max-width: 600px) {
-    .bd-light-carousel-track-s {
-      grid-template-columns: 1fr !important;
-    }
-  }
 `;

package/src/components/cards/card.js

@@ -25,8 +25,32 @@ class Card extends LitElement {
     return this.offsetWidth > 0 && this.offsetHeight > 0;
   }
 
+  _getColumnCount(itemCount) {
+    if (itemCount <= 4) return itemCount;
+    if (itemCount <= 6) return 3;
+    if (itemCount <= 8) return 4;
+    if (itemCount === 9) return 3;
+    return 4;
+  }
+
+  _updateCardWidth() {
+    const colCount  = this._getColumnCount(this._itemCount);
+    const track     = this.renderRoot?.querySelector(".bd-light-carousel-track-s");
+    if (!track) return;
+
+    const trackW    = track.getBoundingClientRect().width;
+    const gap       = 24;
+    const totalGaps = (colCount - 1) * gap;
+    const cardW     = Math.floor((trackW - totalGaps) / colCount);
+
+    this.style.setProperty("--bd-card-cols", colCount);
+    this.style.setProperty("--bd-card-width", `${cardW}px`);
+  }
+
   _onSlotChange = () => {
     this._itemCount = this.querySelectorAll("bd-card-item").length;
+    this._updateCardWidth();
+    this.requestUpdate();
     this._equalizeHeights();
   }
 
@@ -36,6 +60,11 @@ class Card extends LitElement {
     const items = Array.from(this.querySelectorAll("bd-card-item"));
     if (!items.length) return;
 
+    console.log('[bd-card-section] _equalizeHeights called', {
+      innerWidth: window.innerWidth,
+      items     : items.length
+    });
+
     if (window.innerWidth <= 768) {
       items.forEach(item => {
         const box      = item.renderRoot?.querySelector(".bd-light-box-s");
@@ -43,25 +72,11 @@ class Card extends LitElement {
         const titleW   = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
         const contentW = item.renderRoot?.querySelector(".bd-card-content-wrapper");
 
-        if (box)      { box.style.cssText     = ""; }
+        if (box)      { box.style.cssText = ""; box.style.width = "100%"; box.style.boxSizing = "border-box"; }
         if (iconW)    { iconW.style.height    = ""; }
         if (titleW)   { titleW.style.height   = ""; }
         if (contentW) { contentW.style.height = ""; }
       });
-
-      const sectionW = this.getBoundingClientRect().width;
-      if (sectionW > 0) {
-        requestAnimationFrame(() => {
-          items.forEach(item => {
-            const box = item.renderRoot?.querySelector(".bd-light-box-s");
-            if (box) {
-              box.style.width    = `${sectionW}px`;
-              box.style.minWidth = `${sectionW}px`;
-            }
-          });
-        });
-      }
-
       return;
     }
 
@@ -71,13 +86,30 @@ class Card extends LitElement {
       const titleW   = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
       const contentW = item.renderRoot?.querySelector(".bd-card-content-wrapper");
 
-      if (box)      { box.style.height = "auto"; box.style.minHeight = "0"; box.style.width = "auto"; }
+      if (box)      { box.style.height = "auto"; box.style.minHeight = "0"; }
       if (iconW)    { iconW.style.height    = "auto"; }
       if (titleW)   { titleW.style.height   = "auto"; }
       if (contentW) { contentW.style.height = "auto"; }
     });
 
     requestAnimationFrame(() => {
+      // Log box computed styles
+      console.log('[bd-card-section] box computed styles:', items.map(item => {
+        const box = item.renderRoot?.querySelector(".bd-light-box-s");
+        if (!box) return null;
+        const cs = getComputedStyle(box);
+        return {
+          width        : box.getBoundingClientRect().width,
+          computedWidth: cs.width,
+          flex         : cs.flex,
+          minWidth     : cs.minWidth,
+          inlineWidth  : box.style.width,
+          cssVarOnHost : getComputedStyle(item).getPropertyValue('--bd-card-width'),
+          cssVarOnBox  : cs.getPropertyValue('--bd-card-width')
+        };
+      }));
+
+      // Egalizare icon wrappers
       let maxIcon = 0;
       items.forEach(item => {
         const el = item.renderRoot?.querySelector(".bd-light-box-header-s");
@@ -92,6 +124,7 @@ class Card extends LitElement {
         });
       }
 
+      // Egalizare title wrappers
       let maxTitle = 0;
       items.forEach(item => {
         const el = item.renderRoot?.querySelector(".bd-light-title-badge-wrapper-s");
@@ -106,6 +139,7 @@ class Card extends LitElement {
         });
       }
 
+      // Egalizare content wrappers
       let maxContent = 0;
       items.forEach(item => {
         const el = item.renderRoot?.querySelector(".bd-card-content-wrapper");
@@ -120,16 +154,14 @@ class Card extends LitElement {
         });
       }
 
-      let maxW = 0;
+      // Egalizare height total
       let maxH = 0;
       items.forEach(item => {
         const box = item.renderRoot?.querySelector(".bd-light-box-s");
         if (!box) return;
-        const rect = box.getBoundingClientRect();
-        if (rect.height > maxH) maxH = rect.height;
-        if (rect.width  > maxW) maxW = rect.width;
+        const h = box.getBoundingClientRect().height;
+        if (h > maxH) maxH = h;
       });
-
       if (maxH > 0) {
         items.forEach(item => {
           const box = item.renderRoot?.querySelector(".bd-light-box-s");
@@ -139,16 +171,6 @@ class Card extends LitElement {
           }
         });
       }
-
-      if (maxW > 0) {
-        items.forEach(item => {
-          const box = item.renderRoot?.querySelector(".bd-light-box-s");
-          if (box) {
-            box.style.width    = `${maxW}px`;
-            box.style.minWidth = `${maxW}px`;
-          }
-        });
-      }
     });
   }
 
@@ -158,11 +180,13 @@ class Card extends LitElement {
     }
 
     await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+    this._updateCardWidth();
     this._equalizeHeights();
 
     const track = this.renderRoot.querySelector(".bd-light-carousel-track-s");
     if (track) {
       this._resizeObserver = new ResizeObserver(() => {
+        this._updateCardWidth();
         this._equalizeHeights();
       });
       this._resizeObserver.observe(track);
@@ -187,12 +211,11 @@ class Card extends LitElement {
               </div>
             `
           : ""}
-        <div
-          class="bd-light-carousel-track-s"
-          style="grid-template-columns: repeat(${this._itemCount || 1}, 1fr);"
-        >
+
+        <div class="bd-light-carousel-track-s">
           <slot @slotchange=${this._onSlotChange}></slot>
         </div>
+
       </section>
     `;
   }
@@ -219,6 +242,9 @@ class CardItem extends LitElement {
   }
 
   _renderIcon() {
+    const SMALL_ICON_THRESHOLD = 120;
+    const SMALL_ICON_SIZE = 40;
+
     const iconEl = this.querySelector("[slot='icon']");
 
     if (iconEl) {
@@ -226,21 +252,25 @@ class CardItem extends LitElement {
       const originalW = iconEl.getAttribute("width");
       const originalH = iconEl.getAttribute("height");
 
-      clone.style.maxWidth  = "120px";
-      clone.style.maxHeight = "120px";
-      clone.style.width     = originalW ? `${originalW}px` : "auto";
-      clone.style.height    = originalH ? `${originalH}px` : "auto";
+      const isSmallIcon =
+        (originalW && parseInt(originalW) <= SMALL_ICON_THRESHOLD) ||
+      (originalH && parseInt(originalH) <= SMALL_ICON_THRESHOLD);
+
+      const targetSize = isSmallIcon ? SMALL_ICON_SIZE : 120;
+
+      clone.style.maxWidth  = `${targetSize}px`;
+      clone.style.maxHeight = `${targetSize}px`;
+      clone.style.width     = `${targetSize}px`;
+      clone.style.height    = `${targetSize}px`;
       clone.style.objectFit = "contain";
       clone.style.display   = "block";
 
       const innerImg = clone.querySelector("img");
       if (innerImg) {
-        const imgW = innerImg.getAttribute("width");
-        const imgH = innerImg.getAttribute("height");
-        innerImg.style.maxWidth  = "120px";
-        innerImg.style.maxHeight = "120px";
-        innerImg.style.width     = imgW ? `${Math.min(parseInt(imgW), 120)}px` : "auto";
-        innerImg.style.height    = imgH ? `${Math.min(parseInt(imgH), 120)}px` : "auto";
+        innerImg.style.maxWidth  = `${targetSize}px`;
+        innerImg.style.maxHeight = `${targetSize}px`;
+        innerImg.style.width     = `${targetSize}px`;
+        innerImg.style.height    = `${targetSize}px`;
         innerImg.style.objectFit = "contain";
         innerImg.style.display   = "block";
         innerImg.removeAttribute("width");
@@ -252,10 +282,10 @@ class CardItem extends LitElement {
 
     if (this.icon) {
       return html`<img
-        src="${this.icon}"
-        alt="icon"
-        class="bd-light-icon-s"
-      />`;
+      src="${this.icon}"
+      alt="icon"
+      class="bd-light-icon-s"
+    />`;
     }
 
     return "";
@@ -287,7 +317,6 @@ class CardItem extends LitElement {
       <div
         class="bd-light-box-s
           ${isCentered ? "bd-light-box-center" : ""}
-          ${!hasContent ? "bd-light-box-no-content" : ""}
           ${this.bgBlue ? "bd-light-box-blue" : ""}"
       >
         <div class="bd-light-box-header-s ${isCentered ? "bd-light-box-header-center" : ""}">

package/src/components/cards/card.stories.js

@@ -19,345 +19,228 @@ export default {
         component: `
 **Card** and **CardItem** are Lit components for a static card grid layout.
 
-- \`<bd-card-section>\` — section wrapper with optional title and subtitle
-- \`<bd-card-item>\` — individual card with optional icon, title, subtitle, alignment, slotted content, CTA button, and blue background
-
-### Usage
-\`\`\`html
-<bd-card-section title="Why Bitdefender" subtitle="Optional subtitle">
-  <bd-card-item title="AI Protection" align="center" bg-blue cta-align="center">
-    <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-    <bd-p>Powered by machine learning.</bd-p>
-    <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-  </bd-card-item>
-</bd-card-section>
-\`\`\`
-
-### CardItem Slots
-| Slot | Descriere |
-|---|---|
-| \`icon\` | Iconiță sau imagine (max 120x120px automat) |
-| default | Conținut text |
-| \`cta\` | Buton CTA jos |
-
-### CardItem Props
-| Prop | Valori | Default |
+Grid columns are calculated automatically:
+| Items | Columns | Layout |
 |---|---|---|
-| \`title\` | String | \`''\` |
-| \`subtitle\` | String | \`''\` |
-| \`align\` | \`start\`, \`center\` | \`start\` |
-| \`bg-blue\` | Boolean | \`false\` |
-| \`cta-align\` | \`start\`, \`center\`, \`end\` | \`start\` |
+| 1–4 | = items | 1, 2, 3, 4 |
+| 5–6 | 3 | 3+2, 3+3 |
+| 7–8 | 4 | 4+3, 4+4 |
+| 9 | 3 | 3+3+3 |
+| 10+ | 4 | 4+4+... |
         `
       }
     }
-  },
-  argTypes: {
-    sectionTitle: {
-      control    : 'text',
-      description: 'Optional title for the card section',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
-    },
-    sectionSubtitle: {
-      control    : 'text',
-      description: 'Optional subtitle for the card section',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardSection' }
-    },
-    itemTitle: {
-      control    : 'text',
-      description: 'Title of the card item',
-      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'CardItem' }
-    },
-    align: {
-      control    : { type: 'select' },
-      options    : ['start', 'center'],
-      description: 'Alignment of card content',
-      table      : { type: { summary: "'start' | 'center'" }, defaultValue: { summary: 'start' }, category: 'CardItem' }
-    },
-    bgBlue: {
-      control    : 'boolean',
-      description: 'Blue background (#E4F2FF) on card',
-      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'CardItem' }
-    },
-    ctaAlign: {
-      control    : { type: 'select' },
-      options    : ['start', 'center', 'end'],
-      description: 'CTA button alignment',
-      table      : { type: { summary: "'start' | 'center' | 'end'" }, defaultValue: { summary: 'start' }, category: 'CardItem' }
-    }
   }
 };
 
+// ─── Shared data ──────────────────────────────────────────────────────────────
+
+const icons = [
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`,
+  html`<bd-family-icon slot="icon" width="32" height="32" color="#006DFF"></bd-family-icon>`,
+  html`<bd-arrow-up-icon slot="icon" width="32" height="32" color="#006DFF"></bd-arrow-up-icon>`,
+  html`<bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>`,
+  html`<bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>`,
+  html`<bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>`,
+  html`<bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>`
+];
+
+const titles = [
+  'AI Protection', 'Multi-layer Security', 'VPN Included', 'Parental Controls',
+  'Identity Protection', 'Password Manager', 'Anti-tracker', 'Webcam Protection',
+  'Privacy Firewall', 'Dark Web Monitor'
+];
+
+const descriptions = [
+  'Powered by machine learning and behavioral analysis.',
+  'Multiple independent protection layers stop any attack.',
+  'Unlimited encrypted VPN traffic for all your devices.',
+  'Advanced controls to protect your children online.',
+  'Goes beyond credit monitoring to protect your identity.',
+  'Store and autofill passwords securely across all devices.',
+  'Block trackers and keep your browsing activity private.',
+  'Prevent unauthorized access to your webcam.',
+  'Advanced firewall protection for your network.',
+  'Get instant alerts if your data appears on the dark web.'
+];
+
+const makeCards = (count) => Array.from({ length: count }, (_, i) => html`
+  <bd-card-item title="${titles[i % titles.length]}">
+    ${icons[i % icons.length]}
+    <bd-p>${descriptions[i % descriptions.length]}</bd-p>
+  </bd-card-item>
+`);
+
 // ─── Default ──────────────────────────────────────────────────────────────────
 
 export const Default = {
   name  : 'Default (4 items)',
   render: () => html`
     <bd-card-section title="Why Bitdefender">
-      <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="VPN Included">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-        <bd-p>Advanced controls to protect your children online.</bd-p>
-      </bd-card-item>
+      ${makeCards(4)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: '4 card items cu iconițe, titluri și conținut.' } } }
+  parameters: { docs: { description: { story: '4 carduri — 4 coloane pe un rând.' } } }
 };
 
-// ─── With Blue Background ─────────────────────────────────────────────────────
+// ─── 5 items ──────────────────────────────────────────────────────────────────
 
-export const WithBlueBg = {
-  name  : 'With Blue Background',
+export const FiveItems = {
+  name  : '5 Items — 3+2',
   render: () => html`
-    <bd-card-section title="Why Bitdefender">
-      <bd-card-item title="AI Protection" bg-blue>
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security" bg-blue>
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="VPN Included" bg-blue>
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Parental Controls" bg-blue>
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-        <bd-p>Advanced controls to protect your children online.</bd-p>
-      </bd-card-item>
+    <bd-card-section title="5 Cards — 3+2 layout">
+      ${makeCards(5)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Toate cardurile cu `bg-blue` — fundal #E4F2FF.' } } }
+  parameters: { docs: { description: { story: '5 carduri → 3 coloane → layout 3+2, rândul 2 centrat.' } } }
 };
 
-// ─── Mixed Blue Background ────────────────────────────────────────────────────
+// ─── 6 items ──────────────────────────────────────────────────────────────────
 
-export const MixedBlueBg = {
-  name  : 'Mixed — Some Blue',
+export const SixItems = {
+  name  : '6 Items — 3+3',
   render: () => html`
-    <bd-card-section title="Features">
-      <bd-card-item title="AI Protection" bg-blue>
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="VPN Included" bg-blue>
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-        <bd-p>Advanced controls to protect your children online.</bd-p>
-      </bd-card-item>
+    <bd-card-section title="6 Cards — 3+3 layout">
+      ${makeCards(6)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Mix de carduri cu și fără `bg-blue`.' } } }
+  parameters: { docs: { description: { story: '6 carduri → 3 coloane → layout 3+3.' } } }
 };
 
-// ─── With CTA ─────────────────────────────────────────────────────────────────
+// ─── 7 items ──────────────────────────────────────────────────────────────────
 
-export const WithCTA = {
-  name  : 'With CTA Button',
+export const SevenItems = {
+  name  : '7 Items — 4+3',
   render: () => html`
-    <bd-card-section title="Why Bitdefender">
-      <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="VPN Included">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-        <bd-p>Advanced controls to protect your children online.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
+    <bd-card-section title="7 Cards — 4+3 layout">
+      ${makeCards(7)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Cards cu buton CTA via `slot="cta"`.' } } }
+  parameters: { docs: { description: { story: '7 carduri → 4 coloane → layout 4+3, rândul 2 centrat.' } } }
 };
 
-// ─── With CTA Centered ────────────────────────────────────────────────────────
+// ─── 8 items ──────────────────────────────────────────────────────────────────
 
-export const WithCTACentered = {
-  name  : 'With CTA — Centered',
+export const EightItems = {
+  name  : '8 Items — 4+4',
   render: () => html`
-    <bd-card-section title="Features">
-      <bd-card-item title="AI Protection" cta-align="center">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security" cta-align="center">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple protection layers.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="VPN Included" cta-align="center">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
+    <bd-card-section title="8 Cards — 4+4 layout">
+      ${makeCards(8)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'CTA centrat cu `cta-align="center"`.' } } }
+  parameters: { docs: { description: { story: '8 carduri → 4 coloane → layout 4+4.' } } }
 };
 
-// ─── With Subtitle ────────────────────────────────────────────────────────────
+// ─── 9 items ──────────────────────────────────────────────────────────────────
 
-export const WithSubtitle = {
-  name  : 'With Section Subtitle',
+export const NineItems = {
+  name  : '9 Items — 3+3+3',
   render: () => html`
-    <bd-card-section
-      title="Why Bitdefender"
-      subtitle="Trusted by millions worldwide for over 20 years."
-    >
-      <bd-card-item title="AI Protection" subtitle="Machine learning powered">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security" subtitle="Independent protection layers">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-      </bd-card-item>
-      <bd-card-item title="VPN Included" subtitle="Unlimited traffic">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
-      </bd-card-item>
+    <bd-card-section title="9 Cards — 3+3+3 layout">
+      ${makeCards(9)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Section cu subtitlu și card items cu subtitlu sub titlu.' } } }
+  parameters: { docs: { description: { story: '9 carduri → 3 coloane → layout 3+3+3.' } } }
 };
 
-// ─── Uneven Content Alignment Test ────────────────────────────────────────────
+// ─── 10 items ─────────────────────────────────────────────────────────────────
 
-export const WithCTAUnevenContent = {
-  name  : 'Uneven Content — Alignment Test',
+export const TenItems = {
+  name  : '10 Items — 4+4+2',
   render: () => html`
-    <bd-card-section title="Features">
-      <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis to stop threats before they reach you. Our AI engine learns from billions of threat signals every day.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security — Advanced Protection Suite">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Stop any attack.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="VPN">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere in the world, at any time.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-        <bd-p>Advanced controls to protect your children online and monitor their activity.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="danger" size="sm">Get started</bd-button-link>
-      </bd-card-item>
+    <bd-card-section title="10 Cards — 4+4+2 layout">
+      ${makeCards(10)}
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Conținut inegal — testează egalizarea rândurilor. Butoanele CTA trebuie să fie la aceeași înălțime.' } } }
+  parameters: { docs: { description: { story: '10 carduri → 4 coloane → layout 4+4+2, ultimul rând centrat.' } } }
 };
 
-// ─── No Section Title ─────────────────────────────────────────────────────────
+// ─── With Blue Background ─────────────────────────────────────────────────────
 
-export const NoSectionTitle = {
-  name  : 'No Section Title',
+export const WithBlueBg = {
+  name  : 'With Blue Background',
   render: () => html`
-    <bd-card-section>
-      <bd-card-item title="AI Protection">
+    <bd-card-section title="Why Bitdefender">
+      <bd-card-item title="AI Protection" bg-blue>
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
+      <bd-card-item title="Multi-layer Security" bg-blue>
         <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
         <bd-p>Multiple independent protection layers stop any attack.</bd-p>
       </bd-card-item>
-      <bd-card-item title="VPN Included">
+      <bd-card-item title="VPN Included" bg-blue>
         <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
       </bd-card-item>
-      <bd-card-item title="Parental Controls">
+      <bd-card-item title="Parental Controls" bg-blue>
         <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
         <bd-p>Advanced controls to protect your children online.</bd-p>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Section fără `title` — header div omis.' } } }
+  parameters: { docs: { description: { story: 'Toate cardurile cu `bg-blue` — fundal #E4F2FF.' } } }
 };
 
-// ─── Centered Alignment ───────────────────────────────────────────────────────
+// ─── Mixed Blue ───────────────────────────────────────────────────────────────
 
-export const CenteredAlignment = {
-  name  : 'Centered Alignment',
+export const MixedBlueBg = {
+  name  : 'Mixed — Some Blue',
   render: () => html`
     <bd-card-section title="Features">
-      <bd-card-item title="AI Protection" align="center">
+      <bd-card-item title="AI Protection" bg-blue>
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
-      <bd-card-item title="Multi-layer Security" align="center">
+      <bd-card-item title="Multi-layer Security">
         <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
         <bd-p>Multiple independent protection layers stop any attack.</bd-p>
       </bd-card-item>
-      <bd-card-item title="VPN Included" align="center">
+      <bd-card-item title="VPN Included" bg-blue>
         <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
       </bd-card-item>
-      <bd-card-item title="Parental Controls" align="center">
+      <bd-card-item title="Parental Controls">
         <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
         <bd-p>Advanced controls to protect your children online.</bd-p>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: '`align="center"` pe toate itemele.' } } }
+  parameters: { docs: { description: { story: 'Mix de carduri cu și fără `bg-blue`.' } } }
 };
 
-// ─── No Icon ──────────────────────────────────────────────────────────────────
+// ─── With CTA ─────────────────────────────────────────────────────────────────
 
-export const NoIcon = {
-  name  : 'No Icons',
+export const WithCTA = {
+  name  : 'With CTA Button',
   render: () => html`
-    <bd-card-section title="Features">
+    <bd-card-section title="Why Bitdefender">
       <bd-card-item title="AI Protection">
+        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Multi-layer Security">
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
         <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="VPN Included">
+        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
         <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
       <bd-card-item title="Parental Controls">
+        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
         <bd-p>Advanced controls to protect your children online.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Carduri fără iconițe.' } } }
+  parameters: { docs: { description: { story: 'Cards cu buton CTA via `slot="cta"`.' } } }
 };
 
 // ─── No Slotted Content ───────────────────────────────────────────────────────
@@ -366,7 +249,7 @@ export const NoSlottedContent = {
   name  : 'No Slotted Content',
   render: () => html`
     <bd-card-section title="Features">
-      <bd-card-item title="AI Protection">
+      <bd-card-item align="center" title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
       </bd-card-item>
       <bd-card-item title="Multi-layer Security">
@@ -380,67 +263,56 @@ export const NoSlottedContent = {
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Carduri cu doar iconițe și titlu — fără conținut slotted.' } } }
+  parameters: { docs: { description: { story: 'Carduri cu doar iconițe și titlu.' } } }
 };
-
-// ─── Two Columns ──────────────────────────────────────────────────────────────
-
-export const TwoColumns = {
-  name  : 'Two Columns',
+export const WithImages = {
+  name  : 'With Images',
   render: () => html`
-    <bd-card-section title="Features">
-      <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
+    <bd-card-section title="Our Products">
+      <bd-card-item title="Total Security">
+        <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
+        <bd-p>Complete protection for all your devices with advanced threat detection.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+      <bd-card-item title="Internet Security">
+        <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
+        <bd-p>Stay safe online.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      </bd-card-item>
+      <bd-card-item title="Antivirus Plus">
+        <img slot="icon" src="/assets/tabs-img3.png" alt="Antivirus Plus" />
+        <bd-p>Essential protection for your Windows PC with real-time antivirus and anti-phishing.</bd-p>
+        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Două coloane — grid se ajustează automat.' } } }
+  parameters: { docs: { description: { story: 'Cards cu imagini via `slot="icon"` — max-width/max-height 120px aplicat automat.' } } }
 };
 
-// ─── Three Columns ────────────────────────────────────────────────────────────
-
-export const ThreeColumns = {
-  name  : 'Three Columns',
+export const MixedIconsAndImages = {
+  name  : 'Mixed — Icons and Images',
   render: () => html`
-    <bd-card-section title="Features">
+    <bd-card-section title="Mixed Media">
       <bd-card-item title="AI Protection">
         <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
         <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
       </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
+      <bd-card-item title="Total Security">
+        <img slot="icon" src="/assets/tabs-img1.png" alt="Total Security" />
+        <bd-p>Complete protection for all your devices.</bd-p>
       </bd-card-item>
       <bd-card-item title="VPN Included">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
+        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
+        <bd-p>Unlimited encrypted VPN traffic for all your devices, anywhere.</bd-p>
       </bd-card-item>
-    </bd-card-section>
-  `,
-  parameters: { docs: { description: { story: 'Trei coloane — grid se ajustează automat.' } } }
-};
-
-// ─── Single Item ──────────────────────────────────────────────────────────────
-
-export const SingleItem = {
-  name  : 'Single Item (edge case)',
-  render: () => html`
-    <bd-card-section title="Feature">
-      <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Machine learning-powered protection.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
+      <bd-card-item title="Internet Security">
+        <img slot="icon" src="/assets/tabs-img2.png" alt="Internet Security" />
+        <bd-p>Stay safe online with advanced threat detection.</bd-p>
       </bd-card-item>
     </bd-card-section>
   `,
-  parameters: { docs: { description: { story: 'Edge case — un singur card.' } } }
+  parameters: { docs: { description: { story: 'Mix de SVG icons și imagini mari în același grid — testează egalizarea icon row height.' } } }
 };
-
 // ─── Mobile View ──────────────────────────────────────────────────────────────
 
 export const MobileView = {
@@ -448,26 +320,7 @@ export const MobileView = {
   parameters: { viewport: { defaultViewport: 'mobile1' } },
   render    : () => html`
     <bd-card-section title="Why Bitdefender">
-      <bd-card-item title="AI Protection">
-        <bd-individual-icon slot="icon" width="32" height="32" color="#006DFF"></bd-individual-icon>
-        <bd-p>Powered by machine learning and behavioral analysis.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Multi-layer Security">
-        <bd-globe-icon slot="icon" width="32" height="32" color="#006DFF"></bd-globe-icon>
-        <bd-p>Multiple independent protection layers stop any attack.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="VPN Included">
-        <bd-machine-learning-icon slot="icon" width="32" height="32" color="#006DFF"></bd-machine-learning-icon>
-        <bd-p>Unlimited encrypted VPN traffic for all your devices.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
-      <bd-card-item title="Parental Controls">
-        <bd-analysis-icon slot="icon" width="32" height="32" color="#006DFF"></bd-analysis-icon>
-        <bd-p>Advanced controls to protect your children online.</bd-p>
-        <bd-button-link slot="cta" href="#" kind="primary" size="sm">Learn more</bd-button-link>
-      </bd-card-item>
+      ${makeCards(4)}
     </bd-card-section>
   ` };