@repobit/dex-system-design 0.24.3 → 0.24.5

package/src/components/header/header-code.css.js

@@ -0,0 +1,125 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-headercode-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: var(--spacing-48);
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  /* === LEFT COLUMN === */
+  .bd-headercode-left {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-16);
+  }
+
+  /* Slot for a small breadcrumb-style line above the eyebrow
+     (e.g. "Bitdefender AI    skill-scanner"). Empty by default —
+     collapses to nothing when no content is slotted in. */
+  .bd-headercode-breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-16);
+    color: var(--color-neutral-500);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs, 12px);
+  }
+
+  .bd-headercode-breadcrumb:not(:has(*)) {
+    display: none;
+  }
+
+  .bd-headercode-eyebrow {
+    color: var(--color-blue-400);
+    font-weight: var(--typography-fontWeight-bold);
+    margin: 0;
+  }
+
+  .bd-headercode-title {
+    margin: 0;
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.05);
+  }
+
+  .bd-headercode-description {
+    color: var(--color-neutral-600);
+    max-width: 480px;
+    margin: 0;
+  }
+
+  .bd-headercode-cta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-16);
+    margin-top: var(--spacing-8);
+  }
+
+  /* Slot for a small status badge next to the CTA buttons (e.g. "AVAILABLE").
+     Empty by default — collapses to nothing when no content is slotted in. */
+  .bd-headercode-badge {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-neutral-500);
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xs, 12px);
+    letter-spacing: 0.05em;
+  }
+
+  .bd-headercode-badge:not(:has(*)) {
+    display: none;
+  }
+
+  /* === RIGHT COLUMN === */
+  .bd-headercode-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--spacing-8);
+  }
+
+  .bd-headercode-right ::slotted(*) {
+    width: 100%;
+    max-width: 520px;
+    box-shadow: 0 1px 2px #0003,0 18px 48px #000a1e73
+  }
+
+  .bd-headercode-terminal-caption {
+    color: var(--color-neutral-500);
+    margin: 0;
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 899px) {
+    .bd-headercode-container {
+      grid-template-columns: 1fr;
+      gap: var(--spacing-32);
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+
+    .bd-headercode-right {
+      align-items: stretch;
+    }
+
+    .bd-headercode-right ::slotted(*) {
+      max-width: none;
+    }
+
+    .bd-headercode-description {
+      max-width: none;
+    }
+  }
+`;

package/src/components/header/header-code.js

@@ -0,0 +1,69 @@
+import { LitElement, html, nothing } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import "../button/button.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
+import "../terminal/terminal-message.js";
+import headerCodeCSS from "./header-code.css.js";
+
+class HeaderCode extends LitElement {
+  static properties = {
+    eyebrow        : { type: String },
+    title          : { type: String },
+    description    : { type: String },
+    terminalCaption: { type: String, attribute: "terminal-caption" }
+  };
+
+  static styles = [tokens, headerCodeCSS];
+
+  constructor() {
+    super();
+    this.eyebrow = "";
+    this.title = "";
+    this.description = "";
+    this.terminalCaption = "";
+  }
+
+  render() {
+    return html`
+      <div class="bd-headercode-container">
+        <div class="bd-headercode-left">
+          <div class="bd-headercode-breadcrumb">
+            <slot name="breadcrumb"></slot>
+          </div>
+
+          ${this.eyebrow
+            ? html`<bd-p kind="normal" class="bd-headercode-eyebrow">${this.eyebrow}</bd-p>`
+            : nothing}
+
+          <bd-h as="h1" class="bd-headercode-title">
+            <slot name="title">${this.title}</slot>
+          </bd-h>
+
+          ${this.description
+            ? html`<bd-p kind="regular" class="bd-headercode-description">${this.description}</bd-p>`
+            : nothing}
+
+          <div class="bd-headercode-cta">
+            <slot name="primary-button"></slot>
+            <slot name="secondary-button"></slot>
+            <span class="bd-headercode-badge">
+              <slot name="badge"></slot>
+            </span>
+          </div>
+        </div>
+
+        <div class="bd-headercode-right">
+          <slot name="terminal-content"></slot>
+
+          ${this.terminalCaption
+            ? html`<bd-p kind="small" class="bd-headercode-terminal-caption" font-family="'IBM Plex Mono', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+>${this.terminalCaption}</bd-p>`
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("bd-header-code", HeaderCode);

package/src/components/header/header-code.stories.js

@@ -0,0 +1,226 @@
+import { html } from "lit";
+import "../button/button.js";
+import "../terminal/terminal-message.js";
+import "./header-code.js";
+
+export default {
+  title     : "Components/Header Code",
+  component : "bd-header-code",
+  tags      : ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs  : {
+      description: {
+        component: `
+**HeaderCode** is a hero/header variant pairing marketing copy on the left with a
+terminal-style code/demo window on the right. Unlike \`bd-header\`, it has no pricing —
+just eyebrow, title, description, two CTA buttons, and a slotted terminal.
+
+The terminal window — including the traffic-light titlebar dots — is owned by
+\`<bd-terminal-message>\`. \`bd-header-code\` additionally renders an optional small
+caption **below** the terminal box via \`terminal-caption\`.
+
+### Usage
+\`\`\`html
+<bd-header-code
+  eyebrow="Security for autonomous AI agents"
+  title="Bitdefender AI Guardian"
+  description="A security layer between your AI agents and the actions they take."
+  terminal-caption="AI Guardian CLI · first-run setup"
+>
+  <bd-button-link slot="primary-button" label="Download BETA Today" kind="primary">Download BETA Today</bd-button-link>
+  <bd-button-link slot="secondary-button" label="See how it works" kind="outline">See how it works</bd-button-link>
+
+  <bd-terminal-message
+    slot="terminal-content"
+    show-titlebar
+    panel-label="Welcome"
+    icon="👋"
+    greeting="Hi, I'm AI Guardian."
+    intro="I keep an eye on what your AI assistant can access and do:"
+    .items=\${["which tools it can use", "which credentials to watch", "which MCP servers to trust"]}
+    footer-bold="Let's get started."
+    footer="It only takes a minute, and nothing changes until you confirm it."
+    show-cursor
+    hint="[Enter] to continue · [esc] to cancel"
+  ></bd-terminal-message>
+</bd-header-code>
+\`\`\`
+
+### Attributes
+| Attribute          | Type   | Default | Description                                       |
+|----------------------|--------|---------|-----------------------------------------------------|
+| \`eyebrow\`            | String | \`""\`    | Small label above the title                        |
+| \`title\`              | String | \`""\`    | Main heading (can be overridden via \`title\` slot) |
+| \`description\`        | String | \`""\`    | Supporting paragraph under the title               |
+| \`terminal-caption\`   | String | \`""\`    | Small caption rendered below the terminal box       |
+
+### Slots
+| Slot               | Description                                  |
+|---------------------|-----------------------------------------------|
+| \`title\`             | Overrides the \`title\` attribute if content is provided |
+| \`primary-button\`    | The main CTA (typically \`bd-button-link\`)    |
+| \`secondary-button\`  | The secondary CTA                             |
+| \`terminal-content\`  | Freeform content rendered on the right (typically a \`bd-terminal-message\`) |
+        `
+      }
+    }
+  },
+  argTypes: {
+    eyebrow        : { control: "text", table: { category: "Content" } },
+    title          : { control: "text", table: { category: "Content" } },
+    description    : { control: "text", table: { category: "Content" } },
+    terminalCaption: { control: "text", table: { category: "Terminal" } }
+  }
+};
+
+const terminalContent = html`
+  <bd-terminal-message
+    slot="terminal-content"
+    show-titlebar
+    panel-label="Welcome"
+    icon="👋"
+    greeting="Hi, I'm AI Guardian."
+    intro="I keep an eye on what your AI assistant can access and do:"
+    .items=${["which tools it can use", "which credentials to watch", "which MCP servers to trust"]}
+    footer-bold="Let's get started."
+    footer="It only takes a minute, and nothing changes until you confirm it."
+    show-cursor
+    hint="[Enter] to continue · [esc] to cancel"
+  ></bd-terminal-message>
+`;
+
+const render = (args) => html`
+  <bd-header-code
+    eyebrow=${args.eyebrow}
+    title=${args.title}
+    description=${args.description}
+    terminal-caption=${args.terminalCaption}
+  >
+    <bd-button-link
+      slot="primary-button"
+      label="Download BETA Today"
+      kind="primary"
+      size="md"
+      font-size="18px"
+      font-weight="600"
+    >Download BETA Today</bd-button-link>
+
+    <bd-button-link
+      slot="secondary-button"
+      label="See how it works"
+      kind="primary-outline"
+      size="md"
+      font-size="18px"
+      font-weight="600"
+    >See how it works</bd-button-link>
+
+    ${terminalContent}
+  </bd-header-code>
+`;
+
+export const Default = {
+  name: "Default — AI Guardian",
+  args: {
+    eyebrow        : "Security for autonomous AI agents",
+    title          : "Bitdefender AI Guardian",
+    description    : "A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely.",
+    terminalCaption: "AI Guardian CLI · first-run setup"
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Matches the reference design exactly: titlebar says \"Welcome\", the caption below the terminal box says \"AI Guardian CLI · first-run setup\"."
+      }
+    }
+  }
+};
+
+export const NoEyebrow = {
+  name: "No Eyebrow",
+  args: {
+    eyebrow        : "",
+    title          : "Bitdefender AI Guardian",
+    description    : "A security layer between your AI agents and the actions they take.",
+    terminalCaption: "AI Guardian CLI"
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "The eyebrow line is optional — omitting it removes the element entirely rather than leaving empty space."
+      }
+    }
+  }
+};
+
+export const SingleButton = {
+  name: "Single CTA",
+  args: {
+    eyebrow        : "Security for autonomous AI agents",
+    title          : "Bitdefender AI Guardian",
+    description    : "A security layer between your AI agents and the actions they take.",
+    terminalCaption: "AI Guardian CLI"
+  },
+  render: (args) => html`
+    <bd-header-code
+      eyebrow=${args.eyebrow}
+      title=${args.title}
+      description=${args.description}
+      terminal-caption=${args.terminalCaption}
+    >
+      <bd-button-link
+        slot="primary-button"
+        label="Download BETA Today"
+        kind="primary"
+        size="md"
+      >Download BETA Today</bd-button-link>
+
+      ${terminalContent}
+    </bd-header-code>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: "Only the primary-button slot is filled — the secondary slot renders nothing since it's empty."
+      }
+    }
+  }
+};
+
+export const NoCaption = {
+  name: "No Caption",
+  args: {
+    eyebrow        : "Security for autonomous AI agents",
+    title          : "Bitdefender AI Guardian",
+    description    : "A security layer between your AI agents and the actions they take.",
+    terminalCaption: ""
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "`terminal-caption` omitted — no small caption line under the terminal box."
+      }
+    }
+  }
+};
+
+export const Playground = {
+  name: "Playground",
+  args: {
+    eyebrow        : "Security for autonomous AI agents",
+    title          : "Bitdefender AI Guardian",
+    description    : "A security layer between your AI agents and the actions they take — policies, guardrails, and monitoring that let agents run safely.",
+    terminalCaption: "AI Guardian CLI · first-run setup"
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Fully interactive story — use the Controls panel to edit eyebrow, title, description, and terminal caption live."
+      }
+    }
+  }
+};

package/src/components/heading/heading.css.js

@@ -1,6 +1,9 @@
 import { css } from "lit";
 
 export default css`
+ :host {
+    display: block;
+  }
   @layer bd-components {
     .bd-heading {
       margin: 0;

package/src/components/icons/bd-ai-icon.js

@@ -0,0 +1,27 @@
+// icons/bd-ai-icon.js
+import { LitElement, html } from "lit";
+
+class BdAiIcon extends LitElement {
+  static properties = {
+    width : { type: Number },
+    height: { type: Number }
+  };
+
+  constructor() {
+    super();
+    this.width = 126;
+    this.height = 15; // raport identic cu viewBox-ul real (524.8:62.6)
+  }
+
+  createRenderRoot() { return this; }
+
+  render() {
+    return html`
+<svg width="${this.width}" height="${this.height}" viewBox="0 0 524.8 62.6" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#006dff" d="M89.8,48.5v-17.8h10.5v-8.3h-10.5v-11.4h-6.2l-3.6,11.4h-9.5v.5l3.6,3.1c5.5,4.5,5.9,4.4,5.9,6.9v-2.2s0,18,0,18c0,12.8,9,15.1,17,13l4.9-7.8-.3-.2c-6.8,2-11.7,1.8-11.7-5.2ZM62.8,3.2c-3.6,0-6.2,2.8-6.2,5.9s2.6,5.9,6.2,5.9,6.4-2.5,6.4-5.9-2.8-5.9-6.4-5.9ZM37.2,31.2v-.2c6-1.8,10-6.1,10-12.7,0-10.5-9-14.5-17.7-14.5H8.4s-8.4,0-8.4,0v.9l3,2.5c3.6,2.9,4,3.5,4,6.1v48.4h20.8c10.9,0,21.9-3.9,21.9-16.5s-5.2-13.2-12.5-14ZM17.3,12.6h8.5c5.7,0,7.5.8,9.3,2.5,1.3,1.2,1.9,3,1.9,5s-.6,3.5-2,4.8c-1.7,1.6-4,2.4-8.3,2.4h-9.4v-14.7ZM26.8,52.8h-9.5v-16.7h9.9c8.3,0,12.2,2.1,12.2,8.2s-7.3,8.5-12.7,8.5ZM130.8,2.1l3.1,2c2.8,1.8,3.2,2.6,3.2,5.1v18.2h-.2c-2-2.5-6-6-13.3-6-11.2,0-19,9-19,20.6s7.3,20.6,19.4,20.6,10.6-2.1,13.5-6.9h.2l1,5.9h8.3V1.4h-16.1v.7ZM125.9,53.8c-7.2,0-11.5-5.6-11.5-11.8s4.3-11.8,11.5-11.8,11.5,5.6,11.5,11.8-4.3,11.8-11.5,11.8ZM52.7,23.1l1.6,1.3c3.5,2.7,3.7,3.2,3.7,6.5h0v30.8h9.8V22.4h-15.1v.6ZM376.8,21.4c-11.8,0-20.5,8.3-20.5,20.6s9.1,20.6,22.2,20.6,7.4-.7,10.5-1.9l5.6-9.3-.7-.4c-4.8,2.5-9.9,3.8-14.4,3.8-6.8,0-12.6-3.4-13.3-9.3h29.9c1.3-15.4-7-24-19.2-24ZM366.1,38.1c.7-5.6,4.3-9.3,10.1-9.3s9.9,3.6,10,9.3h-20.1ZM412.3,28.6h-.2v-6.2h-16.5v.4s2.5,1.6,2.5,1.6c4,2.5,4.2,3.3,4.2,8.2v29h9.8v-21c0-2.1,1.3-9.9,10.5-9.9s3.1.3,4.7.7v-9.5c-1.1-.3-2.3-.6-3.5-.6-5.2,0-9.5,2.7-11.6,7.2ZM334.1,2.1l1.4.9c4.7,3,5.3,3.9,5.3,9v15.4h-.3c-2-2.5-6-6-13.3-6-11.2,0-19,9-19,20.6s7.3,20.6,19.4,20.6,10.6-2.1,13.5-6.9h.2l1,5.9h8.3V1.4h-16.5v.7ZM329.6,53.8c-7.2,0-11.5-5.6-11.5-11.8s4.3-11.8,11.5-11.8,11.5,5.6,11.5,11.8-4.3,11.8-11.5,11.8ZM288.1,21.4c-4.4,0-9.3,2.2-12.5,7h-.2v-6h-8.4s-7.7,0-7.7,0v.4l2.4,1.6c4,2.5,4.3,3.3,4.3,8.2v29h9.8v-21.4c0-5.2,2.5-10,9-10s8,5.2,8,9.6v21.8h9.8v-24.8c0-9.1-5.3-15.4-14.6-15.4ZM239.8,21.4c-11.9,0-20.5,8.3-20.5,20.6s9.1,20.6,22.2,20.6,7.4-.7,10.5-1.9l5.6-9.3-.8-.4c-4.8,2.5-9.9,3.8-14.4,3.8-6.8,0-12.6-3.4-13.3-9.3h29.9c1.3-15.4-7-24-19.2-24ZM229.1,38.1c.7-5.6,4.3-9.3,10.1-9.3s9.9,3.6,10,9.3h-20.1ZM173.1,21.4c-11.9,0-20.5,8.3-20.5,20.6s9.1,20.6,22.2,20.6,7.4-.7,10.5-1.9l5.6-9.3-.7-.4c-4.8,2.5-9.9,3.8-14.4,3.8-6.8,0-12.6-3.4-13.3-9.3h29.9v-2.7c0-13.6-8.3-21.3-19.2-21.3ZM162.4,38.1c.7-5.6,4.3-9.3,10.1-9.3s9.9,3.6,10,9.3h-20.1ZM209.8,15.1c0-6.9,6.1-8.8,13.9-5.7l.5-.4-2.3-8.3c-15-3-22,3.7-22,14.4v7.2h-9.6v.6l5,4.1c3.9,3.1,4.6,3.8,4.6,7.1v27.6h9.8v-31h9.1v-8.4h-9.1v-7.1ZM524.8,9.6V3.9h-23.2v5.8h8.1v46.2h-8.1v5.8h23.2v-5.8h-8.1V9.6h8.1ZM467.4,3.9l-20.2,57.7h7l5.8-17h23.3l5.8,17h7.3l-20.2-57.7h-8.9ZM461.7,38.4l9.8-28.1h.4l9.8,28.1h-19.9Z"/>
+</svg>
+    `;
+  }
+}
+
+customElements.define("bd-ai-icon", BdAiIcon);

package/src/components/list/list-item/list-item.css.js

@@ -11,7 +11,7 @@ export default css`
     gap: var(--spacing-8);
     color: var(--color-neutral-700);
     line-height: var(--typography-lineHeight-normal);
-    font-family: var(--typography-fontFamily-sans);
+    font-family: var(--font-family-mono);
   }
 
   /* === SIZE VARIANTS === */
@@ -47,7 +47,7 @@ export default css`
     --bd-li-marker-size: var(--spacing-6);
     width: var(--bd-li-marker-size);
     height: var(--bd-li-marker-size);
-    background-color: var(--color-neutral-1000);
+    background-color: var(--bd-li-marker-color, var(--color-neutral-1000));
     border-radius: 50%;
   }
 
@@ -63,7 +63,7 @@ export default css`
   .bd-list-item.number .bd-list-item-marker::before {
     content: counter(bd-list-counter) ".";
     font-weight: var(--typography-fontWeight-semibold);
-    color: var(--color-neutral-1000);
+    color: var(--bd-li-marker-color, var(--color-neutral-1000));
   }
 
   /* Check List */

package/src/components/list/list-item/list-item.js

@@ -4,9 +4,10 @@ import listItemCSS from "./list-item.css.js";
 
 export class BdListItem extends LitElement {
   static properties = {
-    kind: { type: String }, // bullet, number, check, none
-    size: { type: String }, // sm, md, lg
-    icon: { type: String }  // custom icon URL
+    kind : { type: String }, // bullet, number, check, none
+    size : { type: String }, // sm, md, lg
+    icon : { type: String }, // custom icon URL
+    color: { type: String }  // optional
   };
 
   constructor() {
@@ -14,11 +15,16 @@ export class BdListItem extends LitElement {
     this.kind = "bullet";
     this.size = "md";
     this.icon = "";
+    this.color = "";
   }
 
   render() {
+    const style = this.color
+      ? `color: ${this.color}; --bd-li-marker-color: ${this.color};`
+      : "";
+
     return html`
-      <li class="bd-list-item ${this.kind} ${this.size}">
+      <li class="bd-list-item ${this.kind} ${this.size}" style="${style}">
         ${this._renderMarker()}
         <span class="bd-list-item-content">
           <slot></slot>

package/src/components/overview/overview.css.js

@@ -0,0 +1,121 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-infopanel-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    column-gap: var(--spacing-48);
+    row-gap: 0;
+    max-width: var(--layout-ensemble-max-width, 1200px);
+    margin: 0 auto;
+    padding: var(--spacing-48) var(--layout-ensemble-inline-padding, var(--spacing-24));
+    box-sizing: border-box;
+  }
+
+  /* Title spans both columns on its own row */
+  .bd-infopanel-title {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    margin: 0;
+    color: var(--color-neutral-1000);
+    line-height: var(--typography-lineHeight-tight, 1.1);
+    margin-bottom: var(--spacing-48);
+  }
+
+  /* === LEFT COLUMN (description) === */
+  .bd-infopanel-left {
+    grid-column: 1;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+
+  .bd-infopanel-description {
+    margin: 0;
+    color: var(--color-neutral-900);
+    max-width: 46ch;
+    line-height: 1.5;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  /* === RIGHT COLUMN (facts) === */
+  .bd-infopanel-right {
+    grid-column: 2;
+    grid-row: 2;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bd-infopanel-row {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-24);
+  }
+
+  .bd-infopanel-row:first-of-type {
+    padding-top: 0;
+  }
+
+  .bd-infopanel-row:last-of-type {
+    padding-bottom: 0;
+  }
+
+  .bd-infopanel-divider {
+    border-top: 2px solid var(--color-blue-500);
+    margin-bottom: var(--spacing-16);
+  }
+
+  .bd-infopanel-label {
+    margin: 0;
+    color: var(--color-neutral-600);
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-family: var(--typography-fontFamily-mono, monospace);
+    font-size: var(--typography-fontSize-xxs);
+  }
+
+  .bd-infopanel-value {
+    margin: 0;
+    color: var(--color-neutral-1000);
+    font-weight: var(--typography-fontWeight-bold, 700);
+  }
+
+  /* === RESPONSIVE === */
+  @media (max-width: 899px) {
+    .bd-infopanel-container {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto;
+      gap: var(--spacing-32);
+      padding: var(--spacing-32) var(--spacing-24);
+    }
+
+    .bd-infopanel-title {
+      grid-column: 1;
+      grid-row: 1;
+      margin-bottom: var(--spacing-16);
+    }
+
+    .bd-infopanel-left {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .bd-infopanel-right {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .bd-infopanel-description {
+      max-width: none;
+    }
+  }
+`;