diff --git a/wp-content/themes/moonshine/app/components/builder/BuilderSections.fragment.gql b/wp-content/themes/moonshine/app/components/builder/BuilderSections.fragment.gql
index f982706..f6dcc20 100644
--- a/wp-content/themes/moonshine/app/components/builder/BuilderSections.fragment.gql
+++ b/wp-content/themes/moonshine/app/components/builder/BuilderSections.fragment.gql
@@ -1,8 +1,7 @@
 fragment BuilderSections on GroupAbstractBuilder_Fields {
   sections {
     __typename
-    ... on GroupAbstractBuilderSectionsTextBlockLayout {
-      ... SectionTextBlock
-    }
+    ... on GroupAbstractBuilderSectionsHeroSplitLayout { ... SectionHeroSplit }
+    ... on GroupAbstractBuilderSectionsTextBlockLayout { ... SectionTextBlock }
   }
 }
diff --git a/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.fragment.gql b/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.fragment.gql
new file mode 100644
index 0000000..bf0d63a
--- /dev/null
+++ b/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.fragment.gql
@@ -0,0 +1,6 @@
+fragment SectionHeroSplit on GroupAbstractBuilderSectionsHeroSplitLayout {
+  content
+  reverse
+  ...AcfMedia
+}
+ 
\ No newline at end of file
diff --git a/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue b/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue
new file mode 100644
index 0000000..4455aed
--- /dev/null
+++ b/wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { tv, type VariantProps } from "tailwind-variants";
+import type { SectionHeroSplitFragment } from "#graphql/operations";
+
+const tvSectionHeroSplit = tv({
+  slots: {
+    base: "py-6",
+    container: "container flex flex-col gap-6 items-center",
+    content: "flex-1",
+    media: "w-full basis-1/2",
+  },
+  variants: {
+    reverse: {
+      false: {
+        container: "lg:flex-row",
+      },
+      true: {
+        container: "lg:flex-row-reverse",
+      },
+    },
+  },
+  defaultVariants: {
+    reverse: false,
+  },
+});
+
+const props = defineProps<SectionHeroSplitFragment>();
+const classes = tvSectionHeroSplit({
+  reverse: props.reverse,
+} as VariantProps<typeof tvSectionHeroSplit>);
+</script>
+
+<template>
+  <section :class="classes.base()">
+    <div :class="classes.container()">
+      <UiProse :content="content" :class="classes.content()" />
+      <AcfMedia :media="$props" :class="classes.media()" />
+    </div>
+  </section>
+</template>
diff --git a/wp-content/themes/moonshine/server/graphql/schema.graphql b/wp-content/themes/moonshine/server/graphql/schema.graphql
index 633860b..4f8c195 100644
--- a/wp-content/themes/moonshine/server/graphql/schema.graphql
+++ b/wp-content/themes/moonshine/server/graphql/schema.graphql
@@ -4727,6 +4727,9 @@ type MediaItem implements ContentNode & DatabaseIdentifier & HierarchicalContent
   """
   modifiedGmt: String
 
+  """CSS object-position value from Media Focus Point plugin"""
+  objectPosition: String
+
   """The parent of the node. The parent object can be of various types"""
   parent: HierarchicalContentNodeToParentContentNodeConnectionEdge