Add design system, audit sections, apply global classes

Design system (design/):
- bcw-css-variables.json: color, spacing (--space-xs→2xl), typography (--h1→h6, --text-sm→xl)
- bcw-color-palette.json: named swatches referencing CSS variables
- bcw-global-classes.json: section-container, section-header, col-3, col-4, features-container, footer-sub-section
- design.md: full variable reference and usage guide

Templates:
- features-3col + features-4col: add global_classes embed + _cssGlobalClasses references
- All headers + footers: apply var(--color-primary) background to section elements
- footer-columns: add footer-sub-section class to column containers
- Remove content-image-left (duplicate of content-image-right with children reversed)
- testimonials: gap tweak 12px → 15px on card containers

Repo hygiene:
- Add .gitignore (Updated_Sections/)
- Clear Updated_Sections staging folder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1 @@
+Updated_Sections/

README.md

@@ -6,30 +6,32 @@ A minimal, structural collection of Bricks Builder templates for quick-starting
 
 ## Template Index
 
-### Sections (9)
+### Sections (8)
-| File | Description |
+
-|---|---|
+| File                       | Description                                            |
-| `hero-simple.json` | Full-width hero: heading + subtitle + two buttons |
+| -------------------------- | ------------------------------------------------------ |
-| `hero-split.json` | 2-column hero: text left, image placeholder right |
+| `hero-simple.json`         | Full-width hero: heading + subtitle + two buttons      |
-| `features-3col.json` | Icon + heading + text, 3 equal columns |
+| `hero-split.json`          | 2-column hero: text left, image placeholder right      |
-| `features-4col.json` | Icon + heading + text, 4 equal columns |
+| `features-3col.json`       | Icon + heading + text, 3 equal columns                 |
-| `content-image-right.json` | Text left, image placeholder right |
+| `features-4col.json`       | Icon + heading + text, 4 equal columns                 |
-| `content-image-left.json` | Image placeholder left, text right |
+| `content-image-right.json` | Text left, image placeholder right                     |
-| `cta-banner.json` | Full-width call-to-action: heading + subtitle + button |
+| `cta-banner.json`          | Full-width call-to-action: heading + subtitle + button |
-| `testimonials.json` | 3-column quote cards with name and role |
+| `testimonials.json`        | 3-column quote cards with name and role                |
-| `faq-accordion.json` | Heading + nestable accordion with 5 placeholder items |
+| `faq-accordion.json`       | Heading + nestable accordion with 5 placeholder items  |
 
 ### Headers (3)
-| File | Description |
+
-|---|---|
+| File                   | Description                                    |
-| `header-minimal.json` | Logo left, navigation right |
+| ---------------------- | ---------------------------------------------- |
-| `header-centered.json` | Logo centered, navigation below |
+| `header-minimal.json`  | Logo left, navigation right                    |
+| `header-centered.json` | Logo centered, navigation below                |
 | `header-with-cta.json` | Logo left, navigation center, CTA button right |
 
 ### Footers (2)
-| File | Description |
+
-|---|---|
+| File                  | Description                                      |
-| `footer-minimal.json` | Logo + navigation + copyright, single row |
+| --------------------- | ------------------------------------------------ |
+| `footer-minimal.json` | Logo + navigation + copyright, single row        |
 | `footer-columns.json` | 3 columns: about/logo, quick links, contact info |
 
 ---
@@ -37,18 +39,21 @@ A minimal, structural collection of Bricks Builder templates for quick-starting
 ## How to Import
 
 ### Individual templates
+
 1. Go to **WordPress Admin → Bricks → Templates**
 2. Click **Import**
 3. Select a `.json` file from this kit
 4. The template appears in your list with the "BCW —" prefix
 
 ### Full bundle (ZIP)
+
 1. Go to **WordPress Admin → Bricks → Templates**
 2. Click **Import**
 3. Select `bundles/bcw-starter-kit.zip`
-4. All 14 templates import at once
+4. All 13 templates import at once
 
 ### Using a template
+
 1. Open any page in Bricks editor
 2. Click the **Templates** icon in the toolbar
 3. Find a "BCW —" template and click **Insert**
@@ -69,6 +74,22 @@ If you have multiple headers (e.g., one default, one for landing pages), set con
 
 ---
 
+## Design System
+
+The `design/` folder contains three importable files that give every project a consistent color system and shared layout classes. **Import these first**, before any templates.
+
+See `design/design.md` for the full variable reference and usage guide.
+
+| File                      | Import location                                          |
+| ------------------------- | -------------------------------------------------------- |
+| `bcw-css-variables.json`  | Bricks → Settings → Custom CSS → Variables → Import     |
+| `bcw-color-palette.json`  | Bricks → Settings → Color Palettes → Import             |
+| `bcw-global-classes.json` | Bricks → Settings → Global Classes → Import             |
+
+Before importing, replace the grey placeholder hex values in `bcw-css-variables.json` with the client's brand colors. Everything referencing `var(--color-primary)` updates automatically.
+
+---
+
 ## Page Recipes
 
 Since sections are the reusable building blocks, a "page" is just sections stacked in order. Common recipes:
@@ -84,7 +105,6 @@ Since sections are the reusable building blocks, a "page" is just sections stack
 → `hero-simple` (brief intro)
 → `features-4col` (services overview)
 → `content-image-right` (detail section)
-→ `content-image-left` (second detail section)
 → `cta-banner`
 
 **About page**
@@ -102,17 +122,24 @@ Since sections are the reusable building blocks, a "page" is just sections stack
 
 ## Design Philosophy
 
-All templates are **structural only** — no baked-in colors, font sizes, or spacing. Bricks theme defaults and your Global Styles apply. This keeps the templates neutral and lets your brand come through without fighting overrides.
+All templates are **structural boilerplates** — no baked-in colors, font sizes, or decorative styling. Drop them in, fill with your content, and your Global Styles and design system variables handle the rest.
 
 **What's included per template:**
+
 - Flex layout direction, alignment, and gap on containers
 - Heading tags (h1–h4) for semantic structure
 - Placeholder text on all text elements
 - Labels on outer elements for builder readability
 - Empty image elements (Bricks shows a placeholder in the editor)
+- `var(--color-primary)` background on all header and footer section elements
+- Global class references on column templates (`features-3col`, `features-4col`, `footer-columns`)
 
 ---
 
 ## Bundles
 
 After manual verification, export all templates from Bricks and save the ZIP to `bundles/bcw-starter-kit.zip` for easy one-click import on future projects.
+
+## Further Research
+
+Further research has been conducted, and is available in `./.claude/research/`

TODO.md

@@ -0,0 +1,8 @@
+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.

design/bcw-color-palette.json

@@ -0,0 +1,77 @@
+{
+  "id": "bcwpal",
+  "name": "BCW",
+  "default": false,
+  "colors": [
+    {
+      "id": "bcwc01",
+      "name": "primary",
+      "raw": "var(--color-primary)"
+    },
+    {
+      "id": "bcwc02",
+      "name": "primary-light",
+      "raw": "var(--color-primary-light)"
+    },
+    {
+      "id": "bcwc03",
+      "name": "primary-dark",
+      "raw": "var(--color-primary-dark)"
+    },
+    {
+      "id": "bcwc04",
+      "name": "secondary",
+      "raw": "var(--color-secondary)"
+    },
+    {
+      "id": "bcwc05",
+      "name": "secondary-light",
+      "raw": "var(--color-secondary-light)"
+    },
+    {
+      "id": "bcwc06",
+      "name": "secondary-dark",
+      "raw": "var(--color-secondary-dark)"
+    },
+    {
+      "id": "bcwc07",
+      "name": "tertiary",
+      "raw": "var(--color-tertiary)"
+    },
+    {
+      "id": "bcwc08",
+      "name": "tertiary-light",
+      "raw": "var(--color-tertiary-light)"
+    },
+    {
+      "id": "bcwc09",
+      "name": "tertiary-dark",
+      "raw": "var(--color-tertiary-dark)"
+    },
+    {
+      "id": "bcwc10",
+      "name": "text",
+      "raw": "var(--color-text)"
+    },
+    {
+      "id": "bcwc11",
+      "name": "heading",
+      "raw": "var(--color-heading)"
+    },
+    {
+      "id": "bcwc12",
+      "name": "bg",
+      "raw": "var(--color-bg)"
+    },
+    {
+      "id": "bcwc13",
+      "name": "bg-alt",
+      "raw": "var(--color-bg-alt)"
+    },
+    {
+      "id": "bcwc14",
+      "name": "white",
+      "raw": "var(--color-white)"
+    }
+  ]
+}

design/bcw-css-variables.json

@@ -0,0 +1,198 @@
+{
+  "categories": [
+    {
+      "id": "bcwcol",
+      "name": "Colors"
+    },
+    {
+      "id": "bcwspc",
+      "name": "Spacing"
+    },
+    {
+      "id": "bcwtyp",
+      "name": "Typography"
+    }
+  ],
+  "variables": [
+    {
+      "id": "bcwv01",
+      "name": "color-primary",
+      "value": "#374151",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv02",
+      "name": "color-primary-light",
+      "value": "#9CA3AF",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv03",
+      "name": "color-primary-dark",
+      "value": "#1F2937",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv04",
+      "name": "color-secondary",
+      "value": "#6B7280",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv05",
+      "name": "color-secondary-light",
+      "value": "#D1D5DB",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv06",
+      "name": "color-secondary-dark",
+      "value": "#4B5563",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv07",
+      "name": "color-tertiary",
+      "value": "#F3F4F6",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv08",
+      "name": "color-tertiary-light",
+      "value": "#FFFFFF",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv09",
+      "name": "color-tertiary-dark",
+      "value": "#E5E7EB",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv10",
+      "name": "color-text",
+      "value": "#374151",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv11",
+      "name": "color-heading",
+      "value": "#111827",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv12",
+      "name": "color-bg",
+      "value": "#FFFFFF",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv13",
+      "name": "color-bg-alt",
+      "value": "#F9FAFB",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv14",
+      "name": "color-white",
+      "value": "#FFFFFF",
+      "category": "bcwcol"
+    },
+    {
+      "id": "bcwv15",
+      "name": "space-xs",
+      "value": "8px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv16",
+      "name": "space-sm",
+      "value": "16px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv17",
+      "name": "space-md",
+      "value": "24px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv18",
+      "name": "space-lg",
+      "value": "40px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv19",
+      "name": "space-xl",
+      "value": "64px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv20",
+      "name": "space-2xl",
+      "value": "96px",
+      "category": "bcwspc"
+    },
+    {
+      "id": "bcwv21",
+      "name": "h1",
+      "value": "3rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv22",
+      "name": "h2",
+      "value": "2.25rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv23",
+      "name": "h3",
+      "value": "1.75rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv24",
+      "name": "h4",
+      "value": "1.25rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv25",
+      "name": "h5",
+      "value": "1.125rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv26",
+      "name": "h6",
+      "value": "1rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv27",
+      "name": "text-sm",
+      "value": "0.875rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv28",
+      "name": "text-base",
+      "value": "1rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv29",
+      "name": "text-lg",
+      "value": "1.125rem",
+      "category": "bcwtyp"
+    },
+    {
+      "id": "bcwv30",
+      "name": "text-xl",
+      "value": "1.25rem",
+      "category": "bcwtyp"
+    }
+  ]
+}

design/bcw-global-classes.json

@@ -0,0 +1,74 @@
+[
+  {
+    "id": "features-container",
+    "name": "features-container",
+    "settings": {
+      "_typography": {
+        "text-align": "center"
+      },
+      "_rowGap": "10px"
+    },
+    "modified": 1772146285,
+    "user_id": 2
+  },
+  {
+    "id": "footer-sub-section",
+    "name": "footer-sub-section",
+    "settings": {
+      "_rowGap": "15px"
+    },
+    "modified": 1772146505,
+    "user_id": 2
+  },
+  {
+    "id": "section-container",
+    "name": "section-container",
+    "settings": {
+      "_direction": "column",
+      "_gap": "40px",
+      "_margin": {
+        "top": "15",
+        "bottom": "15"
+      }
+    },
+    "modified": 1772146505,
+    "user_id": 2
+  },
+  {
+    "id": "section-header",
+    "name": "section-header",
+    "settings": {
+      "_direction": "column",
+      "_alignItems": "center",
+      "_gap": "16px"
+    },
+    "modified": 1772146505,
+    "user_id": 2
+  },
+  {
+    "id": "col-3",
+    "name": "col-3",
+    "settings": {
+      "_direction": "row",
+      "_alignItems": "flex-start",
+      "_justifyContent": "center",
+      "_gap": "32px",
+      "_rowGap:mobile_portrait": "15px"
+    },
+    "modified": 1772146505,
+    "user_id": 2
+  },
+  {
+    "id": "col-4",
+    "name": "col-4",
+    "settings": {
+      "_direction": "row",
+      "_alignItems": "flex-start",
+      "_justifyContent": "center",
+      "_gap": "24px",
+      "_rowGap:mobile_portrait": "15px"
+    },
+    "modified": 1772146505,
+    "user_id": 2
+  }
+]

design/design.md

@@ -0,0 +1,109 @@
+# BCW Design System Reference
+
+Three importable files. **Import in this order** before any templates:
+
+1. `bcw-css-variables.json` — defines all custom properties
+2. `bcw-color-palette.json` — adds named swatches to the Bricks color picker
+3. `bcw-global-classes.json` — adds shared layout classes
+
+---
+
+## How to Import
+
+| File                      | Where to import                                          |
+| ------------------------- | -------------------------------------------------------- |
+| `bcw-css-variables.json`  | Bricks → Settings → Custom CSS → Variables → Import     |
+| `bcw-color-palette.json`  | Bricks → Settings → Color Palettes → Import             |
+| `bcw-global-classes.json` | Bricks → Settings → Global Classes → Import             |
+
+---
+
+## CSS Variables
+
+All variables follow the pattern `var(--variable-name)`.
+
+### Colors
+
+Replace the placeholder grey hex values with the client's brand colors before importing.
+
+| Variable                  | Default    | Purpose                                    |
+| ------------------------- | ---------- | ------------------------------------------ |
+| `--color-primary`         | `#374151`  | Main brand color. Used on headers, footers, and primary buttons. |
+| `--color-primary-light`   | `#9CA3AF`  | Lighter variant. Use for hover states, borders, or secondary UI. |
+| `--color-primary-dark`    | `#1F2937`  | Darker variant. Use for active states or deep accents.           |
+| `--color-secondary`       | `#6B7280`  | Supporting brand color.                    |
+| `--color-secondary-light` | `#D1D5DB`  | Light secondary. Good for dividers, subtle backgrounds.          |
+| `--color-secondary-dark`  | `#4B5563`  | Dark secondary. Use for secondary hover/active.                  |
+| `--color-tertiary`        | `#F3F4F6`  | Accent or background fill color.           |
+| `--color-tertiary-light`  | `#FFFFFF`  | Lightest tertiary. Usually pure white.     |
+| `--color-tertiary-dark`   | `#E5E7EB`  | Slightly deeper tertiary. Card backgrounds, borders.             |
+| `--color-text`            | `#374151`  | Default body copy color.                   |
+| `--color-heading`         | `#111827`  | Default heading color.                     |
+| `--color-bg`              | `#FFFFFF`  | Main page background.                      |
+| `--color-bg-alt`          | `#F9FAFB`  | Alternate section background (off-white).  |
+| `--color-white`           | `#FFFFFF`  | Forced white — useful for text on dark backgrounds. |
+
+**Usage example in Bricks:**
+Set any color field to `var(--color-primary)`. When you rebrand, update the variable once and every element using it updates automatically.
+
+---
+
+### Spacing
+
+A simple scale from extra-small to 2x-large. Use these in gap, padding, and margin fields.
+
+| Variable       | Value   | Typical use                                      |
+| -------------- | ------- | ------------------------------------------------ |
+| `--space-xs`   | `8px`   | Tight internal gaps (icon to label, etc.)        |
+| `--space-sm`   | `16px`  | Standard element gaps within a block             |
+| `--space-md`   | `24px`  | Medium spacing — between content blocks          |
+| `--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            |
+
+**Usage example in Bricks:**
+In any gap or padding field, type `var(--space-lg)` instead of a fixed pixel value.
+
+---
+
+### Typography
+
+Heading and text size scale. Apply these in the font-size field of any text element or via Global Classes.
+
+| 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     |
+
+---
+
+## Color Palette
+
+`bcw-color-palette.json` imports a "BCW" palette into the Bricks color picker. Every swatch references a CSS variable — so updating a variable updates the swatch automatically.
+
+Swatches: `primary`, `primary-light`, `primary-dark`, `secondary`, `secondary-light`, `secondary-dark`, `tertiary`, `tertiary-light`, `tertiary-dark`, `text`, `heading`, `bg`, `bg-alt`, `white`
+
+---
+
+## Global Classes
+
+`bcw-global-classes.json` imports shared layout classes. Apply them to container elements in the Bricks panel under **CSS → Classes**.
+
+| Class                | Apply to                          | What it sets                                              |
+| -------------------- | --------------------------------- | --------------------------------------------------------- |
+| `section-container`  | Outermost section container       | `flex-direction: column`, `gap: 40px`, `margin: 15px top/bottom` |
+| `section-header`     | Heading + subtitle block          | `flex-direction: column`, `align-items: center`, `gap: 16px` |
+| `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`               |
+| `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.

footers/footer-columns.json

@@ -2,13 +2,30 @@
   "title": "BCW — Footer Columns",
   "type": "footer",
   "templateType": "footer",
+  "global_classes": [
+    {
+      "id": "footer-sub-section",
+      "name": "footer-sub-section",
+      "settings": {
+        "_rowGap": "15px"
+      },
+      "modified": 1772146505,
+      "user_id": 2
+    }
+  ],
   "footer": [
     {
       "id": "sec001",
       "name": "section",
       "parent": 0,
       "children": ["con001"],
-      "settings": [],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary)"
+          }
+        }
+      },
       "label": "Footer Columns"
     },
     {
@@ -31,7 +48,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "flex-start",
-        "_gap": "16px"
+        "_gap": "16px",
+        "_cssGlobalClasses": ["footer-sub-section"]
       },
       "label": "About Column"
     },
@@ -63,7 +81,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "flex-start",
-        "_gap": "16px"
+        "_gap": "16px",
+        "_cssGlobalClasses": ["footer-sub-section"]
       },
       "label": "Links Column"
     },
@@ -92,7 +111,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "flex-start",
-        "_gap": "12px"
+        "_gap": "12px",
+        "_cssGlobalClasses": ["footer-sub-section"]
       },
       "label": "Contact Column"
     },

footers/footer-minimal.json

@@ -8,7 +8,13 @@
       "name": "section",
       "parent": 0,
       "children": ["con001"],
-      "settings": [],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary)"
+          }
+        }
+      },
       "label": "Footer Minimal"
     },
     {

headers/header-centered.json

@@ -8,7 +8,13 @@
       "name": "section",
       "parent": 0,
       "children": ["con001"],
-      "settings": [],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary)"
+          }
+        }
+      },
       "label": "Header Centered"
     },
     {

headers/header-minimal.json

@@ -8,7 +8,13 @@
       "name": "section",
       "parent": 0,
       "children": ["con001"],
-      "settings": [],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary)"
+          }
+        }
+      },
       "label": "Header Minimal"
     },
     {
@@ -19,7 +25,8 @@
       "settings": {
         "_direction": "row",
         "_alignItems": "center",
-        "_justifyContent": "space-between"
+        "_justifyContent": "space-between",
+        "_gap": "15px"
       }
     },
     {

headers/header-with-cta.json

@@ -8,7 +8,13 @@
       "name": "section",
       "parent": 0,
       "children": ["con001"],
-      "settings": [],
+      "settings": {
+        "_background": {
+          "color": {
+            "raw": "var(--color-primary)"
+          }
+        }
+      },
       "label": "Header With CTA"
     },
     {
@@ -19,7 +25,8 @@
       "settings": {
         "_direction": "row",
         "_alignItems": "center",
-        "_justifyContent": "space-between"
+        "_justifyContent": "space-between",
+        "_gap": "15px"
       }
     },
     {

sections/content-image-left.json

@@ -1,96 +0,0 @@
-{
-  "title": "BCW — Content Image Left",
-  "type": "section",
-  "templateType": "section",
-  "content": [
-    {
-      "id": "con001",
-      "name": "container",
-      "parent": 0,
-      "children": ["imgcol", "con002"],
-      "settings": {
-        "_direction": "row",
-        "_alignItems": "center",
-        "_justifyContent": "space-between",
-        "_gap": "48px",
-        "_margin": {
-          "top": "15",
-          "bottom": "15"
-        }
-      },
-      "label": "Content Image Left"
-    },
-    {
-      "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"
-    },
-    {
-      "id": "con002",
-      "name": "container",
-      "parent": "con001",
-      "children": ["hdg001", "txt001", "btn001"],
-      "settings": {
-        "_direction": "column",
-        "_alignItems": "flex-start",
-        "_gap": "24px",
-        "_width": "50%",
-        "_rowGap": "15"
-      },
-      "label": "Text Column"
-    },
-    {
-      "id": "hdg001",
-      "name": "heading",
-      "parent": "con002",
-      "children": [],
-      "settings": {
-        "tag": "h2",
-        "text": "Section Heading Goes Here"
-      }
-    },
-    {
-      "id": "txt001",
-      "name": "text-basic",
-      "parent": "con002",
-      "children": [],
-      "settings": {
-        "text": "Use this area to describe your product, service, or concept in detail. Two to four sentences works well here. Focus on benefits and outcomes for your reader."
-      }
-    },
-    {
-      "id": "btn001",
-      "name": "button",
-      "parent": "con002",
-      "children": [],
-      "settings": {
-        "text": "Learn More",
-        "style": "primary"
-      }
-    }
-  ]
-}

sections/features-3col.json

@@ -2,6 +2,20 @@
   "title": "BCW — Features 3 Column",
   "type": "section",
   "templateType": "section",
+  "global_classes": [
+    {
+      "id": "features-container",
+      "name": "features-container",
+      "settings": {
+        "_typography": {
+          "text-align": "center"
+        },
+        "_rowGap": "10px"
+      },
+      "modified": 1772146285,
+      "user_id": 2
+    }
+  ],
   "content": [
     {
       "id": "sec001",
@@ -58,8 +72,8 @@
         "_direction": "row",
         "_alignItems": "flex-start",
         "_justifyContent": "center",
-
+        "_gap": "32px",
-        "_gap": "32px"
+        "_rowGap:mobile_portrait": "15px"
       },
       "label": "Features Row"
     },
@@ -71,7 +85,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature One"
     },
@@ -109,7 +124,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature Two"
     },
@@ -147,7 +163,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature Three"
     },

sections/features-4col.json

@@ -2,6 +2,20 @@
   "title": "BCW — Features 4 Column",
   "type": "section",
   "templateType": "section",
+  "global_classes": [
+    {
+      "id": "features-container",
+      "name": "features-container",
+      "settings": {
+        "_typography": {
+          "text-align": "center"
+        },
+        "_rowGap": "10px"
+      },
+      "modified": 1772146285,
+      "user_id": 2
+    }
+  ],
   "content": [
     {
       "id": "sec001",
@@ -58,8 +72,8 @@
         "_direction": "row",
         "_alignItems": "flex-start",
         "_justifyContent": "center",
-
+        "_gap": "24px",
-        "_gap": "32px"
+        "_rowGap:mobile_portrait": "15px"
       },
       "label": "Features Row"
     },
@@ -71,7 +85,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature One"
     },
@@ -109,7 +124,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature Two"
     },
@@ -147,7 +163,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature Three"
     },
@@ -185,7 +202,8 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "center",
-        "_gap": "12px"
+        "_gap": "15px",
+        "_cssGlobalClasses": ["features-container"]
       },
       "label": "Feature Four"
     },

sections/testimonials.json

@@ -71,7 +71,7 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "flex-start",
-        "_gap": "12px"
+        "_gap": "15px"
       },
       "label": "Testimonial One"
     },
@@ -111,7 +111,7 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "flex-start",
-        "_gap": "12px"
+        "_gap": "15px"
       },
       "label": "Testimonial Two"
     },
@@ -151,7 +151,7 @@
       "settings": {
         "_direction": "column",
         "_alignItems": "flex-start",
-        "_gap": "12px"
+        "_gap": "15px"
       },
       "label": "Testimonial Three"
     },