diff --git a/.gitignore b/.gitignore
index 0aa05d4..5aa42e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 Updated_Sections/
 .claude/settings.local.json
-*.tmp.*
+*.tmp.*
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index 98f83e9..0000000
--- a/TODO.md
+++ /dev/null
@@ -1,8 +0,0 @@
-TODO:
-
-- Updated sections with updated sections found at ./Updated_Sections
-- Institute some Global CSS Variables for color (Primary, Secondary, Tertiary)
-  - Assign primary color as background for header & footer
-  - Assign colors throughout the site
-    - Maybe make an importable theme style for Bricks?
-- Also build a Global Classes import sheet, for sharing classes between 3 row containers, 4 row containers, footer sub section containers, etc.
diff --git a/design/bcw-css-variables.json b/design/bcw-css-variables.json
index 1b46911..eb18623 100644
--- a/design/bcw-css-variables.json
+++ b/design/bcw-css-variables.json
@@ -134,64 +134,76 @@
       "value": "96px",
       "category": "bcwspc"
     },
+    {
+      "id": "bcwv31",
+      "name": "row-gap",
+      "value": "15px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv32",
+      "name": "col-gap",
+      "value": "15px",
+      "category": "bcwspc"
+    },
     {
       "id": "bcwv21",
       "name": "h1",
-      "value": "3rem",
+      "value": "64px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv22",
       "name": "h2",
-      "value": "2.25rem",
+      "value": "48px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv23",
       "name": "h3",
-      "value": "1.75rem",
+      "value": "36px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv24",
       "name": "h4",
-      "value": "1.25rem",
+      "value": "28px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv25",
       "name": "h5",
-      "value": "1.125rem",
+      "value": "22px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv26",
       "name": "h6",
-      "value": "1rem",
+      "value": "18px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv27",
       "name": "text-sm",
-      "value": "0.875rem",
+      "value": "14px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv28",
       "name": "text-base",
-      "value": "1rem",
+      "value": "16px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv29",
       "name": "text-lg",
-      "value": "1.125rem",
+      "value": "18px",
       "category": "bcwtyp"
     },
     {
       "id": "bcwv30",
       "name": "text-xl",
-      "value": "1.25rem",
+      "value": "20px",
       "category": "bcwtyp"
     }
   ]
diff --git a/design/bcw-global-classes.json b/design/bcw-global-classes.json
index 664d71e..bf15530 100644
--- a/design/bcw-global-classes.json
+++ b/design/bcw-global-classes.json
@@ -6,7 +6,7 @@
       "_typography": {
         "text-align": "center"
       },
-      "_rowGap": "10px"
+      "_rowGap": "var(--row-gap)"
     },
     "modified": 1772146285,
     "user_id": 2
@@ -15,7 +15,7 @@
     "id": "footer-sub-section",
     "name": "footer-sub-section",
     "settings": {
-      "_rowGap": "15px"
+      "_rowGap": "var(--row-gap)"
     },
     "modified": 1772146505,
     "user_id": 2
@@ -53,7 +53,7 @@
       "_alignItems": "flex-start",
       "_justifyContent": "center",
       "_gap": "32px",
-      "_rowGap:mobile_portrait": "15px"
+      "_rowGap:mobile_portrait": "var(--row-gap)"
     },
     "modified": 1772146505,
     "user_id": 2
@@ -66,9 +66,52 @@
       "_alignItems": "flex-start",
       "_justifyContent": "center",
       "_gap": "24px",
-      "_rowGap:mobile_portrait": "15px"
+      "_rowGap:mobile_portrait": "var(--row-gap)"
     },
     "modified": 1772146505,
     "user_id": 2
+  },
+  {
+    "id": "cards-grid",
+    "name": "cards-grid",
+    "settings": {
+      "_direction": "row",
+      "_flexWrap": "wrap",
+      "_alignItems": "stretch",
+      "_gap": "var(--col-gap)"
+    },
+    "modified": 1773187200,
+    "user_id": 2
+  },
+  {
+    "id": "feature-card",
+    "name": "feature-card",
+    "settings": {
+      "_background": {
+        "color": {
+          "raw": "var(--color-bg-alt)"
+        }
+      },
+      "_padding": {
+        "top": "var(--space-md)",
+        "right": "var(--space-md)",
+        "bottom": "var(--space-md)",
+        "left": "var(--space-md)"
+      },
+      "_border": {
+        "radius": {
+          "top": "8px",
+          "right": "8px",
+          "bottom": "8px",
+          "left": "8px"
+        }
+      },
+      "_rowGap": "var(--row-gap)",
+      "_widthMax": "33%",
+      "_widthMax:mobile_landscape": "50%",
+      "_widthMax:mobile_portrait": "95%"
+    },
+    "modified": 1773187200,
+    "user_id": 2
   }
 ]
diff --git a/design/design.md b/design/design.md
index 6d93a14..67f7d94 100644
--- a/design/design.md
+++ b/design/design.md
@@ -8,6 +8,17 @@ Three importable files. **Import in this order** before any templates:
 
 ---
 
+## Bricks Style Manager — Spacing
+
+Bricks has a built-in Spacing section in the Style Manager that works well and should be kept enabled. One setting needs to match our design system:
+
+- **Scale Steps** → set to: `2xs,xs,sm,md,lg,xl,2xl`
+- **Baseline** → set to `sm`
+
+This aligns the Style Manager's spacing scale labels with our `--space-*` CSS variable naming convention.
+
+---
+
 ## How to Import
 
 | File                      | Where to import                                          |
@@ -60,6 +71,8 @@ A simple scale from extra-small to 2x-large. Use these in gap, padding, and marg
 | `--space-lg`   | `40px`  | Section internal gap (header to content row)     |
 | `--space-xl`   | `64px`  | Section top/bottom padding                       |
 | `--space-2xl`  | `96px`  | Hero or large feature section padding            |
+| `--row-gap`    | `15px`  | Default row gap between stacked elements         |
+| `--col-gap`    | `15px`  | Default column gap between side-by-side elements |
 
 **Usage example in Bricks:**
 In any gap or padding field, type `var(--space-lg)` instead of a fixed pixel value.
@@ -72,16 +85,16 @@ Heading and text size scale. Apply these in the font-size field of any text elem
 
 | Variable       | Value       | Purpose              |
 | -------------- | ----------- | -------------------- |
-| `--h1`         | `3rem`      | Page-level heading   |
-| `--h2`         | `2.25rem`   | Section heading      |
-| `--h3`         | `1.75rem`   | Sub-section heading  |
-| `--h4`         | `1.25rem`   | Card or block heading|
-| `--h5`         | `1.125rem`  | Minor heading        |
-| `--h6`         | `1rem`      | Small label heading  |
-| `--text-sm`    | `0.875rem`  | Captions, footnotes  |
-| `--text-base`  | `1rem`      | Body copy (default)  |
-| `--text-lg`    | `1.125rem`  | Lead paragraph       |
-| `--text-xl`    | `1.25rem`   | Large intro text     |
+| `--h1`         | `64px`      | Page-level heading   |
+| `--h2`         | `48px`      | Section heading      |
+| `--h3`         | `36px`      | Sub-section heading  |
+| `--h4`         | `28px`      | Card or block heading|
+| `--h5`         | `22px`      | Minor heading        |
+| `--h6`         | `18px`      | Small label heading  |
+| `--text-sm`    | `14px`      | Captions, footnotes  |
+| `--text-base`  | `16px`      | Body copy (default)  |
+| `--text-lg`    | `18px`      | Lead paragraph       |
+| `--text-xl`    | `20px`      | Large intro text     |
 
 ---
 
@@ -104,6 +117,8 @@ Swatches: `primary`, `primary-light`, `primary-dark`, `secondary`, `secondary-li
 | `col-3`              | 3-column row container            | `flex-direction: row`, centered, `gap: 32px`, stacks on mobile |
 | `col-4`              | 4-column row container            | `flex-direction: row`, centered, `gap: 24px`, stacks on mobile |
 | `features-container` | Individual feature column (3 or 4 col) | `text-align: center`, `row-gap: 10px`               |
+| `cards-grid`         | Fluid wrapping card row                  | `flex-wrap: wrap`, `align-items: stretch`, `gap: var(--col-gap)` — cards wrap to new rows automatically |
+| `feature-card`       | Individual feature column (card variant) | `background: var(--color-bg-alt)`, `padding: var(--space-md)`, `border-radius: 8px`, `row-gap: 15px`, `max-width: 33%` (50% landscape, 95% portrait) |
 | `footer-sub-section` | Footer column containers          | `row-gap: 15px`                                           |
 
-**Note:** `features-container` and `footer-sub-section` are also embedded in the `features-3col`, `features-4col`, and `footer-columns` templates — importing those templates will bring these classes along automatically.
+**Note:** `features-container` and `footer-sub-section` are also embedded in the `features-3col`, `features-4col`, and `footer-columns` templates — importing those templates will bring these classes along automatically. `feature-card` is embedded in `features-3col-cards` and `cards`. `cards-grid` and `feature-card` are embedded in `cards` — importing that template brings both along. For the fluid card layout, each card element also has `_flexBasis: 280px` and `_flexGrow: 1` set inline so they fill the row and wrap to the next line automatically.
diff --git a/headers/header-with-cta.json b/headers/header-with-cta.json
index 33beae9..ced1619 100644
--- a/headers/header-with-cta.json
+++ b/headers/header-with-cta.json
@@ -21,7 +21,7 @@
       "id": "con001",
       "name": "container",
       "parent": "sec001",
-      "children": ["log001", "nav001", "btn001"],
+      "children": ["log001", "blk001"],
       "settings": {
         "_direction": "row",
         "_alignItems": "center",
@@ -36,21 +36,51 @@
       "children": [],
       "settings": []
     },
+    {
+      "id": "blk001",
+      "name": "block",
+      "parent": "con001",
+      "children": ["nav001", "btn001"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "space-around",
+        "_columnGap": "var(--col-gap)",
+        "_rowGap": "var(--row-gap)",
+        "_direction:mobile_portrait": "row-reverse",
+        "_direction:mobile_landscape": "row-reverse",
+        "_width:mobile_landscape": "fit-content",
+        "_columnGap:mobile_landscape": "var(--col-gap)",
+        "_rowGap:mobile_landscape": "var(--row-gap)"
+      },
+      "label": "Nav Group"
+    },
     {
       "id": "nav001",
       "name": "nav-menu",
-      "parent": "con001",
+      "parent": "blk001",
       "children": [],
-      "settings": []
+      "settings": {
+        "subMenuTransform": {
+          "translateY": "28px"
+        },
+        "mobileMenuToggleColor:mobile_portrait": {
+          "raw": "var(--color-white)"
+        },
+        "mobileMenuToggleColor:mobile_landscape": {
+          "raw": "var(--color-white)"
+        }
+      }
     },
     {
       "id": "btn001",
       "name": "button",
-      "parent": "con001",
+      "parent": "blk001",
       "children": [],
       "settings": {
         "text": "Get in Touch",
-        "style": "primary"
+        "style": "primary",
+        "_display:mobile_portrait": "none"
       }
     }
   ]
diff --git a/sections/announcement-bar.json b/sections/announcement-bar.json
new file mode 100644
index 0000000..47e80a0
--- /dev/null
+++ b/sections/announcement-bar.json
@@ -0,0 +1,134 @@
+{
+  "title": "BCW — Announcement Bar",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "sec001",
+      "name": "section",
+      "parent": 0,
+      "children": ["con001"],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary-dark)"
+          }
+        },
+        "_typography": {
+          "color": {
+            "raw": "var(--color-white)"
+          },
+          "font-size": "12",
+          "font-weight": "600"
+        },
+        "_padding": {
+          "top": "10",
+          "bottom": "10"
+        }
+      },
+      "label": "Announcement Bar"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["blk001", "blk002"],
+      "settings": {
+        "_direction": "row",
+        "_justifyContent": "space-between",
+        "_direction:mobile_portrait": "column",
+        "_alignItems:mobile_portrait": "center"
+      }
+    },
+    {
+      "id": "blk001",
+      "name": "block",
+      "parent": "con001",
+      "children": ["ico001", "txt001"],
+      "settings": {
+        "_direction": "row",
+        "_justifyContent": "flex-start",
+        "_justifyContent:mobile_portrait": "center",
+        "_width": "max-content",
+        "_alignItems": "center"
+      },
+      "label": "Left Info"
+    },
+    {
+      "id": "ico001",
+      "name": "icon",
+      "parent": "blk001",
+      "children": [],
+      "settings": {
+        "icon": {
+          "library": "themify",
+          "icon": "ti-location-pin"
+        },
+        "iconSize": "24px",
+        "_padding": {
+          "right": "10"
+        },
+        "_typography": {
+          "font-size": "22"
+        }
+      }
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "blk001",
+      "children": [],
+      "settings": {
+        "text": "123 Your Street, City, State ZIP",
+        "_typography": {
+          "font-size": "13"
+        }
+      }
+    },
+    {
+      "id": "blk002",
+      "name": "block",
+      "parent": "con001",
+      "children": ["ico002", "txt002"],
+      "settings": {
+        "_direction": "row",
+        "_justifyContent": "flex-end",
+        "_justifyContent:mobile_portrait": "center",
+        "_width": "max-content",
+        "_alignItems": "center"
+      },
+      "label": "Right Info"
+    },
+    {
+      "id": "ico002",
+      "name": "icon",
+      "parent": "blk002",
+      "children": [],
+      "settings": {
+        "icon": {
+          "library": "themify",
+          "icon": "ti-headphone"
+        },
+        "iconSize": "24px",
+        "_padding": {
+          "right": "10"
+        },
+        "_typography": {
+          "font-size": "22"
+        }
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "blk002",
+      "children": [],
+      "settings": {
+        "text": "Tel: +1 000-000-0000",
+        "_typography": {
+          "font-size": "13"
+        }
+      }
+    }
+  ]
+}
diff --git a/sections/cards.json b/sections/cards.json
new file mode 100644
index 0000000..03130c7
--- /dev/null
+++ b/sections/cards.json
@@ -0,0 +1,278 @@
+{
+  "title": "BCW — Cards",
+  "type": "section",
+  "templateType": "section",
+  "global_classes": [
+    {
+      "id": "cards-grid",
+      "name": "cards-grid",
+      "settings": {
+        "_direction": "row",
+        "_flexWrap": "wrap",
+        "_alignItems": "stretch",
+        "_gap": "var(--col-gap)"
+      },
+      "modified": 1773187200,
+      "user_id": 2
+    },
+    {
+      "id": "feature-card",
+      "name": "feature-card",
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-bg-alt)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-md)",
+          "right": "var(--space-md)",
+          "bottom": "var(--space-md)",
+          "left": "var(--space-md)"
+        },
+        "_border": {
+          "radius": {
+            "top": "8px",
+            "right": "8px",
+            "bottom": "8px",
+            "left": "8px"
+          }
+        },
+        "_rowGap": "var(--row-gap)",
+        "_widthMax": "33%",
+        "_widthMax:mobile_landscape": "50%",
+        "_widthMax:mobile_portrait": "95%"
+      },
+      "modified": 1773187200,
+      "user_id": 2
+    }
+  ],
+  "content": [
+    {
+      "id": "sec001",
+      "name": "container",
+      "parent": 0,
+      "children": ["con001", "con002"],
+      "settings": {
+        "_direction": "column",
+        "_gap": "40px",
+        "_margin": {
+          "top": "var(--space-lg)",
+          "bottom": "var(--space-lg)"
+        },
+        "_padding:mobile_portrait": {
+          "left": "15px",
+          "right": "15px"
+        }
+      },
+      "label": "Cards Section"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["hdg001", "txt001"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "16px"
+      },
+      "label": "Section Header"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "tag": "h2",
+        "text": "Section Heading"
+      }
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "text": "A brief supporting statement that introduces this section to your visitors."
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con003", "con004", "con005", "con006"],
+      "settings": {
+        "_cssGlobalClasses": ["cards-grid"],
+        "_rowGap": "var(--row-gap)",
+        "_columnGap": "var(--col-gap)",
+        "_padding:tablet_portrait": {
+          "left": "15",
+          "right": "15"
+        }
+      },
+      "label": "Cards Grid"
+    },
+    {
+      "id": "con003",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico001", "hdg002", "txt002"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card One"
+    },
+    {
+      "id": "ico001",
+      "name": "icon",
+      "parent": "con003",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg002",
+      "name": "heading",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card One"
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    },
+    {
+      "id": "con004",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico002", "hdg003", "txt003"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card Two"
+    },
+    {
+      "id": "ico002",
+      "name": "icon",
+      "parent": "con004",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg003",
+      "name": "heading",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card Two"
+      }
+    },
+    {
+      "id": "txt003",
+      "name": "text-basic",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    },
+    {
+      "id": "con005",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico003", "hdg004", "txt004"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card Three"
+    },
+    {
+      "id": "ico003",
+      "name": "icon",
+      "parent": "con005",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg004",
+      "name": "heading",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card Three"
+      }
+    },
+    {
+      "id": "txt004",
+      "name": "text-basic",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    },
+    {
+      "id": "con006",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico004", "hdg005", "txt005"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_flexBasis": "280px",
+        "_flexGrow": "1",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Card Four"
+    },
+    {
+      "id": "ico004",
+      "name": "icon",
+      "parent": "con006",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg005",
+      "name": "heading",
+      "parent": "con006",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Card Four"
+      }
+    },
+    {
+      "id": "txt005",
+      "name": "text-basic",
+      "parent": "con006",
+      "children": [],
+      "settings": {
+        "text": "Describe this item in one to three short sentences."
+      }
+    }
+  ]
+}
diff --git a/sections/content-image-right.json b/sections/content-image.json
similarity index 76%
rename from sections/content-image-right.json
rename to sections/content-image.json
index a4f9859..c41eaec 100644
--- a/sections/content-image-right.json
+++ b/sections/content-image.json
@@ -1,5 +1,5 @@
 {
-  "title": "BCW — Content Image Right",
+  "title": "BCW — Content Image",
   "type": "section",
   "templateType": "section",
   "content": [
@@ -7,7 +7,7 @@
       "id": "con001",
       "name": "container",
       "parent": 0,
-      "children": ["con002", "imgcol"],
+      "children": ["imgcol", "con002"],
       "settings": {
         "_direction": "row",
         "_alignItems": "center",
@@ -16,9 +16,49 @@
         "_margin": {
           "top": "15",
           "bottom": "15"
+        },
+        "_columnGap": "var(--col-gap)",
+        "_rowGap": "var(--row-gap)",
+        "_padding:tablet_portrait": {
+          "left": "15",
+          "right": "15"
+        },
+        "_padding:mobile_landscape": {
+          "left": "0",
+          "right": "0"
         }
       },
-      "label": "Content Image Right"
+      "label": "Content Image"
+    },
+    {
+      "id": "imgcol",
+      "name": "container",
+      "parent": "con001",
+      "children": ["img001"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "center",
+        "_gap": "24px",
+        "_width": "50%",
+        "_width:mobile_landscape": "100%"
+      },
+      "label": "Image Column"
+    },
+    {
+      "id": "img001",
+      "name": "image",
+      "parent": "imgcol",
+      "children": [],
+      "settings": {
+        "_width": "100%",
+        "image": {
+          "url": "https://picsum.photos/600",
+          "external": true,
+          "filename": "600"
+        }
+      },
+      "label": "Section Image"
     },
     {
       "id": "con002",
@@ -30,7 +70,12 @@
         "_alignItems": "flex-start",
         "_gap": "24px",
         "_width": "50%",
-        "_rowGap": "15"
+        "_rowGap": "var(--row-gap)",
+        "_width:mobile_landscape": "100%",
+        "_padding:mobile_landscape": {
+          "left": "15",
+          "right": "15"
+        }
       },
       "label": "Text Column"
     },
@@ -62,35 +107,6 @@
         "text": "Learn More",
         "style": "primary"
       }
-    },
-    {
-      "id": "imgcol",
-      "name": "container",
-      "parent": "con001",
-      "children": ["img001"],
-      "settings": {
-        "_direction": "row",
-        "_alignItems": "center",
-        "_justifyContent": "center",
-        "_gap": "24px",
-        "_width": "50%"
-      },
-      "label": "Image Column"
-    },
-    {
-      "id": "img001",
-      "name": "image",
-      "parent": "imgcol",
-      "children": [],
-      "settings": {
-        "_width": "100%",
-        "image": {
-          "url": "https://picsum.photos/600",
-          "external": true,
-          "filename": "600"
-        }
-      },
-      "label": "Section Image"
     }
   ]
 }
diff --git a/sections/features-3col-cards.json b/sections/features-3col-cards.json
new file mode 100644
index 0000000..265b38f
--- /dev/null
+++ b/sections/features-3col-cards.json
@@ -0,0 +1,218 @@
+{
+  "title": "BCW — Features 3 Column Cards",
+  "type": "section",
+  "templateType": "section",
+  "global_classes": [
+    {
+      "id": "feature-card",
+      "name": "feature-card",
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-bg-alt)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-md)",
+          "right": "var(--space-md)",
+          "bottom": "var(--space-md)",
+          "left": "var(--space-md)"
+        },
+        "_border": {
+          "radius": {
+            "top": "8px",
+            "right": "8px",
+            "bottom": "8px",
+            "left": "8px"
+          }
+        }
+      },
+      "modified": 1741478400,
+      "user_id": 2
+    }
+  ],
+  "content": [
+    {
+      "id": "sec001",
+      "name": "container",
+      "parent": 0,
+      "children": ["con001", "con002"],
+      "settings": {
+        "_direction": "column",
+        "_gap": "40px",
+        "_margin": {
+          "top": "15",
+          "bottom": "15"
+        },
+        "_padding:mobile_portrait": {
+          "left": "15px",
+          "right": "15px"
+        }
+      },
+      "label": "Features 3 Column Cards"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["hdg001", "txt001"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "16px"
+      },
+      "label": "Section Header"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "tag": "h2",
+        "text": "Why Choose Us"
+      }
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "con001",
+      "children": [],
+      "settings": {
+        "text": "A brief supporting statement that introduces this section to your visitors."
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con003", "con004", "con005"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "stretch",
+        "_justifyContent": "center",
+        "_gap": "32px",
+        "_columnGap": "var(--col-gap)",
+        "_rowGap:mobile_portrait": "var(--row-gap)"
+      },
+      "label": "Features Row"
+    },
+    {
+      "id": "con003",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico001", "hdg002", "txt002"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "15px",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Feature One"
+    },
+    {
+      "id": "ico001",
+      "name": "icon",
+      "parent": "con003",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg002",
+      "name": "heading",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Feature One"
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Describe this feature or benefit in one to three short sentences."
+      }
+    },
+    {
+      "id": "con004",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico002", "hdg003", "txt003"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "15px",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Feature Two"
+    },
+    {
+      "id": "ico002",
+      "name": "icon",
+      "parent": "con004",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg003",
+      "name": "heading",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Feature Two"
+      }
+    },
+    {
+      "id": "txt003",
+      "name": "text-basic",
+      "parent": "con004",
+      "children": [],
+      "settings": {
+        "text": "Describe this feature or benefit in one to three short sentences."
+      }
+    },
+    {
+      "id": "con005",
+      "name": "container",
+      "parent": "con002",
+      "children": ["ico003", "hdg004", "txt004"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "center",
+        "_gap": "15px",
+        "_cssGlobalClasses": ["feature-card"]
+      },
+      "label": "Feature Three"
+    },
+    {
+      "id": "ico003",
+      "name": "icon",
+      "parent": "con005",
+      "children": [],
+      "settings": []
+    },
+    {
+      "id": "hdg004",
+      "name": "heading",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "tag": "h3",
+        "text": "Feature Three"
+      }
+    },
+    {
+      "id": "txt004",
+      "name": "text-basic",
+      "parent": "con005",
+      "children": [],
+      "settings": {
+        "text": "Describe this feature or benefit in one to three short sentences."
+      }
+    }
+  ]
+}
diff --git a/sections/features-3col.json b/sections/features-3col.json
index 06feec5..2e8d406 100644
--- a/sections/features-3col.json
+++ b/sections/features-3col.json
@@ -10,7 +10,7 @@
         "_typography": {
           "text-align": "center"
         },
-        "_rowGap": "10px"
+        "_rowGap": "var(--row-gap)"
       },
       "modified": 1772146285,
       "user_id": 2
@@ -73,7 +73,7 @@
         "_alignItems": "flex-start",
         "_justifyContent": "center",
         "_gap": "32px",
-        "_rowGap:mobile_portrait": "15px"
+        "_rowGap:mobile_portrait": "var(--row-gap)"
       },
       "label": "Features Row"
     },
diff --git a/sections/features-4col.json b/sections/features-4col.json
index d29dfec..a7f6d48 100644
--- a/sections/features-4col.json
+++ b/sections/features-4col.json
@@ -10,7 +10,7 @@
         "_typography": {
           "text-align": "center"
         },
-        "_rowGap": "10px"
+        "_rowGap": "var(--row-gap)"
       },
       "modified": 1772146285,
       "user_id": 2
@@ -73,7 +73,7 @@
         "_alignItems": "flex-start",
         "_justifyContent": "center",
         "_gap": "24px",
-        "_rowGap:mobile_portrait": "15px"
+        "_rowGap:mobile_portrait": "var(--row-gap)"
       },
       "label": "Features Row"
     },
diff --git a/sections/hero-card-homepage.json b/sections/hero-card-homepage.json
new file mode 100644
index 0000000..a521b47
--- /dev/null
+++ b/sections/hero-card-homepage.json
@@ -0,0 +1,136 @@
+{
+  "title": "BCW — Hero Card",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "sec001",
+      "name": "section",
+      "parent": 0,
+      "children": ["con001"],
+      "settings": {
+        "_background": {
+          "image": {
+            "url": "https://picsum.photos/1400/700",
+            "external": true,
+            "filename": "700"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-xl)",
+          "bottom": "var(--space-xl)"
+        }
+      },
+      "label": "Hero Card"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con002"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "flex-start",
+        "_width": "100%",
+        "_maxWidth": "100%"
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "con001",
+      "children": ["txt001", "hdg001", "txt002", "con003"],
+      "settings": {
+        "_direction": "column",
+        "_alignItems": "flex-start",
+        "_gap": "var(--space-md)",
+        "_width": "50%",
+        "_width:mobile_portrait": "100%",
+        "_margin": {
+          "left": "5%"
+        },
+        "_background": {
+          "color": {
+            "raw": "rgba(255, 255, 255, 0.88)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-lg)",
+          "right": "var(--space-lg)",
+          "bottom": "var(--space-lg)",
+          "left": "var(--space-lg)"
+        }
+      },
+      "label": "Content Card"
+    },
+    {
+      "id": "txt001",
+      "name": "text-basic",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "text": "YOUR EYEBROW LABEL",
+        "_typography": {
+          "color": {
+            "raw": "var(--color-primary)"
+          },
+          "font-weight": "600",
+          "letter-spacing": "2px"
+        }
+      },
+      "label": "Eyebrow"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "tag": "h1",
+        "text": "Your Hero Headline Goes Here"
+      }
+    },
+    {
+      "id": "txt002",
+      "name": "text-basic",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "text": "Supporting text that describes your offer or value proposition. Keep it concise and benefit-focused."
+      }
+    },
+    {
+      "id": "con003",
+      "name": "container",
+      "parent": "con002",
+      "children": ["btn001", "btn002"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_gap": "var(--space-sm)"
+      },
+      "label": "Buttons"
+    },
+    {
+      "id": "btn001",
+      "name": "button",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Get Started",
+        "style": "primary"
+      }
+    },
+    {
+      "id": "btn002",
+      "name": "button",
+      "parent": "con003",
+      "children": [],
+      "settings": {
+        "text": "Learn More",
+        "style": "outline"
+      }
+    }
+  ]
+}
diff --git a/sections/hero-card-page.json b/sections/hero-card-page.json
new file mode 100644
index 0000000..0451f19
--- /dev/null
+++ b/sections/hero-card-page.json
@@ -0,0 +1,79 @@
+{
+  "title": "BCW — Hero Card (Page)",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "sec001",
+      "name": "section",
+      "parent": 0,
+      "children": ["con001"],
+      "settings": {
+        "_background": {
+          "image": {
+            "url": "https://picsum.photos/1400/700",
+            "external": true,
+            "filename": "700"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-xl)",
+          "bottom": "var(--space-xl)"
+        }
+      },
+      "label": "Hero Card (Page)"
+    },
+    {
+      "id": "con001",
+      "name": "container",
+      "parent": "sec001",
+      "children": ["con002"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "center",
+        "_justifyContent": "center",
+        "_width": "100%",
+        "_maxWidth": "100%"
+      }
+    },
+    {
+      "id": "con002",
+      "name": "container",
+      "parent": "con001",
+      "children": ["hdg001"],
+      "settings": {
+        "_direction": "row",
+        "_alignItems": "flex-start",
+        "_justifyContent": "center",
+        "_gap": "var(--space-md)",
+        "_width": "50%",
+        "_width:mobile_portrait": "100%",
+        "_background": {
+          "color": {
+            "raw": "rgba(255, 255, 255, 0.88)"
+          }
+        },
+        "_padding": {
+          "top": "var(--space-lg)",
+          "right": "var(--space-lg)",
+          "bottom": "var(--space-lg)",
+          "left": "var(--space-lg)"
+        }
+      },
+      "label": "Content Card"
+    },
+    {
+      "id": "hdg001",
+      "name": "heading",
+      "parent": "con002",
+      "children": [],
+      "settings": {
+        "tag": "h1",
+        "text": "Page Title Goes Here",
+        "_typography": {
+          "text-align": "center"
+        }
+      }
+    }
+  ]
+}
diff --git a/sections/hero-simple.json b/sections/hero-simple.json
index 103d899..b4fd1a0 100644
--- a/sections/hero-simple.json
+++ b/sections/hero-simple.json
@@ -55,7 +55,7 @@
         "_justifyContent": "center",
 
         "_gap": "16px",
-        "_columnGap": "30"
+        "_columnGap": "var(--col-gap)"
       }
     },
     {
diff --git a/sections/hero-slider.json b/sections/hero-slider.json
new file mode 100644
index 0000000..88e0277
--- /dev/null
+++ b/sections/hero-slider.json
@@ -0,0 +1,17 @@
+{
+  "title": "BCW — Hero Slider",
+  "type": "section",
+  "templateType": "section",
+  "content": [
+    {
+      "id": "cod001",
+      "name": "code",
+      "parent": 0,
+      "children": [],
+      "settings": {
+        "code": "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css\">\n\n<style>\n  .bcw-hero-slider {\n    width: 100%;\n  }\n\n  .bcw-hero-slider .swiper-slide {\n    background-image: var(--bg-desktop);\n    background-size: cover;\n    background-position: center;\n    min-height: 600px;\n    display: flex;\n    align-items: center;\n  }\n\n  @media (max-width: 767px) {\n    .bcw-hero-slider .swiper-slide {\n      background-image: var(--bg-mobile);\n      min-height: 420px;\n    }\n  }\n\n  .bcw-hero-card {\n    width: 50%;\n    margin-left: 5%;\n    background: rgba(255, 255, 255, 0.88);\n    padding: var(--space-lg);\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-md);\n  }\n\n  @media (max-width: 767px) {\n    .bcw-hero-card {\n      width: 90%;\n      margin-left: 5%;\n    }\n  }\n\n  .bcw-hero-eyebrow {\n    color: var(--color-primary);\n    font-size: var(--text-sm);\n    font-weight: 600;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n  }\n\n  .bcw-hero-card h1 {\n    font-size: var(--h1);\n    color: var(--color-heading);\n    margin: 0;\n    line-height: 1.15;\n  }\n\n  .bcw-hero-card p {\n    font-size: var(--text-base);\n    color: var(--color-text);\n    margin: 0;\n  }\n\n  .bcw-hero-buttons {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: var(--space-sm);\n  }\n\n  .bcw-btn-primary {\n    display: inline-block;\n    background: var(--color-primary);\n    color: var(--color-white);\n    padding: 12px 24px;\n    font-weight: 600;\n    text-decoration: none;\n  }\n\n  .bcw-btn-primary:hover {\n    background: var(--color-primary-dark);\n    color: var(--color-white);\n  }\n\n  .bcw-btn-outline {\n    display: inline-block;\n    background: transparent;\n    color: var(--color-primary);\n    border: 2px solid var(--color-primary);\n    padding: 10px 24px;\n    font-weight: 600;\n    text-decoration: none;\n  }\n\n  .bcw-btn-outline:hover {\n    background: var(--color-primary);\n    color: var(--color-white);\n  }\n\n  .bcw-hero-slider .swiper-button-prev,\n  .bcw-hero-slider .swiper-button-next {\n    color: var(--color-white);\n  }\n\n  .bcw-hero-slider .swiper-pagination-bullet-active {\n    background: var(--color-primary);\n  }\n</style>\n\n<div class=\"bcw-hero-slider swiper\">\n  <div class=\"swiper-wrapper\">\n\n    <!-- Slide 1 -->\n    <!-- Desktop image: 1400x700, Mobile image: 700x900 (portrait crop) -->\n    <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=1'); --bg-mobile: url('https://picsum.photos/700/900?random=1')\">\n      <div class=\"bcw-hero-card\">\n        <span class=\"bcw-hero-eyebrow\">Your Eyebrow Label</span>\n        <h1>Your Hero Headline Goes Here</h1>\n        <p>Supporting text that describes your offer or value proposition. Keep it concise and benefit-focused.</p>\n        <div class=\"bcw-hero-buttons\">\n          <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n          <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Slide 2 -->\n    <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=2'); --bg-mobile: url('https://picsum.photos/700/900?random=2')\">\n      <div class=\"bcw-hero-card\">\n        <span class=\"bcw-hero-eyebrow\">Second Slide Label</span>\n        <h1>Another Compelling Headline</h1>\n        <p>Each slide carries its own message, image, and call to action. Replace this with your content.</p>\n        <div class=\"bcw-hero-buttons\">\n          <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n          <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Slide 3 -->\n    <div class=\"swiper-slide\" style=\"--bg-desktop: url('https://picsum.photos/1400/700?random=3'); --bg-mobile: url('https://picsum.photos/700/900?random=3')\">\n      <div class=\"bcw-hero-card\">\n        <span class=\"bcw-hero-eyebrow\">Third Slide Label</span>\n        <h1>Keep Your Message Clear and Focused</h1>\n        <p>Duplicate or remove slides as needed. Swap the URLs in the style attribute for desktop and mobile images.</p>\n        <div class=\"bcw-hero-buttons\">\n          <a href=\"#\" class=\"bcw-btn-primary\">Get Started</a>\n          <a href=\"#\" class=\"bcw-btn-outline\">Learn More</a>\n        </div>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"swiper-button-prev\"></div>\n  <div class=\"swiper-button-next\"></div>\n  <div class=\"swiper-pagination\"></div>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js\"></script>\n<script>\n  (function () {\n    var el = document.currentScript.closest('.brxe-code').querySelector('.bcw-hero-slider');\n    new Swiper(el, {\n      loop: true,\n      autoplay: {\n        delay: 5000,\n        disableOnInteraction: false\n      },\n      navigation: {\n        nextEl: el.querySelector('.swiper-button-next'),\n        prevEl: el.querySelector('.swiper-button-prev')\n      },\n      pagination: {\n        el: el.querySelector('.swiper-pagination'),\n        clickable: true\n      }\n    });\n  })();\n</script>"
+      },
+      "label": "Hero Slider"
+    }
+  ]
+}