feat: useLayoutWrapper

wp-content/themes/moonshine/app/components/sections/SectionHeroSplit.global.vue

@@ -3,8 +3,8 @@ import { tv, type VariantProps } from "tailwind-variants";
 import type { SectionHeroSplitFragment } from "#graphql/operations";
 
 const tvSectionHeroSplit = tv({
+  extend: tvLayoutWrapper,
   slots: {
-    base: "py-6",
     container: "container flex flex-col items-center gap-6",
     content: "flex-1",
     media: "w-full basis-1/2",
@@ -27,6 +27,7 @@ const tvSectionHeroSplit = tv({
 const props = defineProps<SectionHeroSplitFragment>();
 const classes = tvSectionHeroSplit({
   reverse: props.reverse,
+  ...props.layoutSettings,
 } as VariantProps<typeof tvSectionHeroSplit>);
 </script>