@repobit/dex-system-design 0.19.2 → 0.20.0

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

@@ -0,0 +1,512 @@
+import { html } from 'lit';
+import './card.js';
+
+export default {
+  title        : 'Components/Card',
+  component    : 'bd-card-section',
+  subcomponents: { 'bd-card-item': 'bd-card-item' },
+  argTypes     : {
+    title: {
+      control    : 'text',
+      description: 'Section title (optional)'
+    },
+    align: {
+      control    : { type: 'select' },
+      options    : ['start', 'center'],
+      description: 'Content alignment for card items'
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-card-section title="${args.title}">
+    <bd-card-item 
+      title="Scam Copilot Chatbot" 
+      icon="/assets/device_protection.png"
+      align="${args.align}"
+    >
+      <p>
+        Specialized AI chatbot that helps you identify suspicious online
+        interactions so you don't become a victim.
+      </p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Privacy Protection" 
+      icon="/assets/privacy_protection.png"
+      align="${args.align}"
+    >
+      <p>
+        Specialized AI chatbot that helps you identify suspicious online
+        interactions so you don't become a victim.
+      </p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Scam Wave Alerts" 
+      icon="/assets/identity_protection.png"
+      align="${args.align}"
+    >
+      <p>
+        Stay informed with real-time alerts about ongoing scam outbreaks
+        detected in your area automatically.
+      </p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Online Scam Protection" 
+      icon="/assets/financial_insurance.png"
+      align="${args.align}"
+    >
+      <p>
+        Focused on browsing activities, it specializes in detecting the newest
+        scam patterns and tactics.
+      </p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: 'Security Features',
+  align: 'start'
+};
+
+export const CenterAligned = Template.bind({});
+CenterAligned.args = {
+  title: 'Security Features - Centered',
+  align: 'center'
+};
+
+export const IconTitleOnly = () => html`
+  <bd-card-section title="Icon + Title Only Cards">
+    <bd-card-item 
+      title="Device Protection"
+      icon="/assets/device_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Privacy Shield"
+      icon="/assets/privacy_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Identity Guard"
+      icon="/assets/identity_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Financial Safety"
+      icon="/assets/financial_insurance.png"
+      align="start"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const IconTitleOnlyCentered = () => html`
+  <bd-card-section title="Icon + Title Only - Centered">
+    <bd-card-item 
+      title="Device Protection"
+      icon="/assets/device_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Privacy Shield"
+      icon="/assets/privacy_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Identity Guard"
+      icon="/assets/identity_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Financial Safety"
+      icon="/assets/financial_insurance.png"
+      align="center"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const MixedContentTypes = () => html`
+  <bd-card-section title="Mixed Content Types">
+    <bd-card-item 
+      title="With Description"
+      icon="/assets/device_protection.png"
+      align="start"
+    >
+      <p>This card has both icon, title and description text below.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Icon + Title Only"
+      icon="/assets/privacy_protection.png"
+      align="start"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Another With Description"
+      icon="/assets/identity_protection.png"
+      align="start"
+    >
+      <p>This card includes detailed description about the feature.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Icon Only"
+      icon="/assets/financial_insurance.png"
+      align="start"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const MixedContentTypesCentered = () => html`
+  <bd-card-section title="Mixed Content Types - Centered">
+    <bd-card-item 
+      title="With Description"
+      icon="/assets/device_protection.png"
+      align="center"
+    >
+      <p>This card has both icon, title and description text below.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Icon + Title Only"
+      icon="/assets/privacy_protection.png"
+      align="center"
+    ></bd-card-item>
+    
+    <bd-card-item 
+      title="Another With Description"
+      icon="/assets/identity_protection.png"
+      align="center"
+    >
+      <p>This card includes detailed description about the feature.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Icon Only"
+      icon="/assets/financial_insurance.png"
+      align="center"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+
+export const WithoutTitle = Template.bind({});
+WithoutTitle.args = {
+  title: '',
+  align: 'start'
+};
+
+export const WithoutTitleCentered = Template.bind({});
+WithoutTitleCentered.args = {
+  title: '',
+  align: 'center'
+};
+
+export const SingleCard = (args) => html`
+  <bd-card-section title="${args.title}">
+    <bd-card-item 
+      title="${args.cardTitle}" 
+      icon="${args.icon}"
+      align="${args.align}"
+    >
+      <p>${args.content}</p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+SingleCard.args = {
+  title    : 'Single Feature',
+  cardTitle: 'Scam Copilot Chatbot',
+  icon     : '/assets/device_protection.png',
+  content  : 'Specialized AI chatbot that helps you identify suspicious online interactions.',
+  align    : 'start'
+};
+
+export const SingleCardCentered = SingleCard.bind({});
+SingleCardCentered.args = {
+  ...SingleCard.args,
+  title: 'Single Feature - Centered',
+  align: 'center'
+};
+
+export const SingleCardNoContent = (args) => html`
+  <bd-card-section title="${args.title}">
+    <bd-card-item 
+      title="${args.cardTitle}" 
+      icon="${args.icon}"
+      align="${args.align}"
+    ></bd-card-item>
+  </bd-card-section>
+`;
+SingleCardNoContent.args = {
+  title    : 'Single Feature - Icon + Title Only',
+  cardTitle: 'Device Protection',
+  icon     : '/assets/device_protection.png',
+  align    : 'start'
+};
+
+export const SingleCardNoContentCentered = SingleCardNoContent.bind({});
+SingleCardNoContentCentered.args = {
+  ...SingleCardNoContent.args,
+  title: 'Single Feature - Icon + Title Only - Centered',
+  align: 'center'
+};
+
+export const MultipleCardsGrid = (args) => html`
+  <bd-card-section title="${args.title}">
+    ${Array.from({ length: args.cardCount }, (_, i) => html`
+      <bd-card-item 
+        title="${args.cardTitle} ${i + 1}" 
+        icon="${args.icon}"
+        align="${args.align}"
+      >
+        <p>${args.content} This is card number ${i + 1}.</p>
+      </bd-card-item>
+    `)}
+  </bd-card-section>
+`;
+MultipleCardsGrid.args = {
+  title    : 'Multiple Security Features',
+  cardTitle: 'Security Feature',
+  icon     : '/assets/device_protection.png',
+  content  : 'Description for this security feature.',
+  cardCount: 6,
+  align    : 'start'
+};
+
+export const MultipleCardsGridCentered = MultipleCardsGrid.bind({});
+MultipleCardsGridCentered.args = {
+  ...MultipleCardsGrid.args,
+  title: 'Multiple Security Features - Centered',
+  align: 'center'
+};
+
+export const CardItemVariations = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    <!-- Start Aligned Variations -->
+    <bd-card-section title="Card Item Variations - Start Aligned">
+      <bd-card-item 
+        title="With Icon and Title"
+        icon="/assets/device_protection.png"
+        align="start"
+      >
+        <p>This card has both an icon and a title with description.</p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Icon + Title Only"
+        icon="/assets/device_protection.png"
+        align="start"
+      ></bd-card-item>
+      
+      <bd-card-item 
+        title="Title Only"
+        align="start"
+      >
+        <p>This card has only a title without an icon, aligned to start.</p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        icon="/assets/privacy_protection.png"
+        align="start"
+      >
+        <p>This card has only an icon without a title, aligned to start.</p>
+      </bd-card-item>
+      
+      <bd-card-item align="start">
+        <p>This card has neither icon nor title - just content, aligned to start.</p>
+      </bd-card-item>
+    </bd-card-section>
+
+    <!-- Center Aligned Variations -->
+    <bd-card-section title="Card Item Variations - Center Aligned">
+      <bd-card-item 
+        title="With Icon and Title"
+        icon="/assets/device_protection.png"
+        align="center"
+      >
+        <p>This card has both an icon and a title with description.</p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Icon + Title Only"
+        icon="/assets/device_protection.png"
+        align="center"
+      ></bd-card-item>
+      
+      <bd-card-item 
+        title="Title Only"
+        align="center"
+      >
+        <p>This card has only a title without an icon, centered alignment.</p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        icon="/assets/privacy_protection.png"
+        align="center"
+      >
+        <p>This card has only an icon without a title, centered alignment.</p>
+      </bd-card-item>
+      
+      <bd-card-item align="center">
+        <p>This card has neither icon nor title - just content, centered alignment.</p>
+      </bd-card-item>
+    </bd-card-section>
+  </div>
+`;
+
+export const LongContent = () => html`
+  <div style="display: flex; flex-direction: column; gap: 3rem;">
+    <!-- Start Aligned Long Content -->
+    <bd-card-section title="Cards with Long Content - Start Aligned">
+      <bd-card-item 
+        title="Feature with Detailed Description"
+        icon="/assets/identity_protection.png"
+        align="start"
+      >
+        <p>
+          This is a much longer description that might wrap across multiple lines.
+          It provides comprehensive details about the feature, its benefits, 
+          and how it helps protect users from various types of online threats 
+          and scams in today's digital landscape.
+        </p>
+        <p>
+          Additional paragraph to demonstrate how multiple paragraphs of content
+          would appear within the card component.
+        </p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Very Long Title That Might Wrap to Multiple Lines"
+        icon="/assets/financial_insurance.png"
+        align="start"
+      >
+        <p>Regular content with an exceptionally long title, aligned to start.</p>
+      </bd-card-item>
+    </bd-card-section>
+
+    <!-- Center Aligned Long Content -->
+    <bd-card-section title="Cards with Long Content - Center Aligned">
+      <bd-card-item 
+        title="Feature with Detailed Description"
+        icon="/assets/identity_protection.png"
+        align="center"
+      >
+        <p>
+          This is a much longer description that might wrap across multiple lines.
+          It provides comprehensive details about the feature, its benefits, 
+          and how it helps protect users from various types of online threats 
+          and scams in today's digital landscape.
+        </p>
+        <p>
+          Additional paragraph to demonstrate how multiple paragraphs of content
+          would appear within the card component.
+        </p>
+      </bd-card-item>
+      
+      <bd-card-item 
+        title="Very Long Title That Might Wrap to Multiple Lines"
+        icon="/assets/financial_insurance.png"
+        align="center"
+      >
+        <p>Regular content with an exceptionally long title, centered alignment.</p>
+      </bd-card-item>
+    </bd-card-section>
+  </div>
+`;
+
+export const MixedAlignment = () => html`
+  <bd-card-section title="Mixed Alignment Cards">
+    <bd-card-item 
+      title="Start Aligned Card"
+      icon="/assets/device_protection.png"
+      align="start"
+    >
+      <p>This card is left aligned with content starting from the left side.</p>
+      <p>Perfect for longer text content that reads better when left aligned.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Center Aligned Card"
+      icon="/assets/privacy_protection.png"
+      align="center"
+    >
+      <p>This card is center aligned with everything centered.</p>
+      <p>Great for highlight features or call-to-action cards.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Start Aligned"
+      icon="/assets/identity_protection.png"
+      align="start"
+    >
+      <p>Another left aligned card with detailed description.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Another Center Aligned"
+      icon="/assets/financial_insurance.png"
+      align="center"
+    >
+      <p>Another center aligned card for balanced presentation.</p>
+    </bd-card-item>
+  </bd-card-section>
+`;
+
+export const AlignmentComparison = () => html`
+  <bd-card-section title="Alignment Comparison">
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
+      <div>
+        <h3 style="text-align: center; color: #333;">Start Aligned</h3>
+        <bd-card-item 
+          title="Start Aligned Example"
+          icon="/assets/device_protection.png"
+          align="start"
+        >
+          <p>This card shows start alignment where content begins from the left.</p>
+          <p>Ideal for readability and longer text content.</p>
+        </bd-card-item>
+      </div>
+      <div>
+        <h3 style="text-align: center; color: #333;">Center Aligned</h3>
+        <bd-card-item 
+          title="Center Aligned Example"
+          icon="/assets/device_protection.png"
+          align="center"
+        >
+          <p>This card shows center alignment with balanced presentation.</p>
+          <p>Perfect for feature highlights and visual balance.</p>
+        </bd-card-item>
+      </div>
+    </div>
+  </bd-card-section>
+`;
+
+export const ResponsiveAlignment = () => html`
+  <bd-card-section title="Responsive Alignment Examples">
+    <bd-card-item 
+      title="Responsive Start Aligned"
+      icon="/assets/device_protection.png"
+      align="start"
+    >
+      <p>This card maintains start alignment across all screen sizes.</p>
+      <p>On mobile devices, the content will still be aligned to the start.</p>
+    </bd-card-item>
+    
+    <bd-card-item 
+      title="Responsive Center Aligned"
+      icon="/assets/privacy_protection.png"
+      align="center"
+    >
+      <p>This card maintains center alignment across all screen sizes.</p>
+      <p>On mobile devices, the content will remain centered for consistency.</p>
+    </bd-card-item>
+  </bd-card-section>
+`;

package/src/components/carousel/carousel.css.js

@@ -71,45 +71,52 @@ export default css`
     text-align: center;
   }
 
-  .bd-left-arrow {
-    content: url("/assets/left_normal.svg");
-  }
+.bd-left-arrow {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 40 0)" fill="%23006DFF"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="white"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="white"/></svg>');
+}
 
-  .bd-left-arrow:hover {
-    content: url("/assets/left_hover.svg");
-  }
 
-  .bd-left-arrow:active {
-    content: url("/assets/left_clicked.svg");
-  }
+.bd-left-arrow:hover {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 40 0)" fill="%230059D6"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="white"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="white"/></svg>');
+}
+
+ .bd-left-arrow:active {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" transform="matrix(-1 0 0 1 40 0)" fill="%230045AD"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="white"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="white"/></svg>');
+}
+
 
   .bd-left-arrow:disabled {
-    content: url("/assets/left_disabled.svg");
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="%23A6ADB4"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="%23A6ADB4"/></svg>');
   }
 
-  .bd-right-arrow {
-    content: url("/assets/right_normal.svg");
-  }
+.bd-right-arrow {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23006DFF"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="white"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="white"/></svg>');
+}
 
-  .bd-right-arrow:hover {
-    content: url("/assets/right_hover.svg");
-  }
 
-  .bd-right-arrow:active {
-    content: url("/assets/right_clicked.svg");
-  }
+.bd-right-arrow:hover {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%230059D6"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="white"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="white"/></svg>');
+}
+
+
+.bd-right-arrow:active {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%230045AD"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="white"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="white"/></svg>');
+}
+
 
   .bd-right-arrow:disabled {
-    content: url("/assets/right_disabled.svg");
-  }
-  .bd-right-arrow.bd-disabled {
-    content: url("/assets/right_disabled.svg");
-    cursor: not-allowed;
-  }
-  .bd-left-arrow.bd-disabled {
-    content: url("/assets/left_disabled.svg");
-    cursor: not-allowed;
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="%23A6ADB4"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="%23A6ADB4"/></svg>');
   }
+.bd-right-arrow.bd-disabled {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M16.6569 14.4142L18.0711 13L25.1421 20.071L23.7279 21.4853L16.6569 14.4142Z" fill="%23A6ADB4"/><path d="M23.7279 18.6568L25.1421 20.071L18.0711 27.1421L16.6569 25.7279L23.7279 18.6568Z" fill="%23A6ADB4"/></svg>');
+  cursor: not-allowed;
+}
+
+ .bd-left-arrow.bd-disabled {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="%23F1F2F3"/><path d="M23.3431 14.4142L21.9289 13L14.8579 20.071L16.2721 21.4853L23.3431 14.4142Z" fill="%23A6ADB4"/><path d="M16.2721 18.6568L14.8579 20.071L21.9289 27.1421L23.3431 25.7279L16.2721 18.6568Z" fill="%23A6ADB4"/></svg>');
+  cursor: not-allowed;
+}
+
   .bd-disabled {
     background: #f1f2f3;
     color: #a6adb4;
@@ -234,7 +241,7 @@ export default css`
   }
 
   .bd-plus-button {
-    content: url("/assets/more_normal.svg");
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="%23006DFF"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="%23006DFF"/></svg>');
     position: absolute;
     bottom: var(--spacing-10);
     right: var(--spacing-10);
@@ -249,17 +256,18 @@ export default css`
     font-weight: bold;
     cursor: pointer;
   }
-  .bd-plus-button:hover {
-    content: url("/assets/more_hover.svg");
-  }
+.bd-plus-button:hover {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" fill="%23F0F7FF" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="%23006DFF"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="%23006DFF"/></svg>');
+}
+
 
   bd-carousel-item::part(content) {
     font-family: var(--typography-fontFamily-sans);
   }
 
-  .bd-plus-button:active {
-    content: url("/assets/more_pressed.svg");
-  }
+.bd-plus-button:active {
+  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19" fill="%23006DFF" stroke="%23006DFF" stroke-width="2"/><path d="M19 11H21V29H19V11Z" fill="white"/><path d="M29 19V21L11 21L11 19L29 19Z" fill="white"/></svg>');
+}
 
   .bd-left-arrow {
     margin-right: var(--spacing-6);

package/src/components/footer/footer-links-group.css.js

@@ -5,7 +5,7 @@ export default css`
     display: flex;
     flex-direction: column;
     gap: var(--spacing-12);
-    padding-right: var(--size-64);
+    padding-right: var(--spacing-64);
   }
 
   h4 {