diff --git a/src/docs/mask-composite.mdx b/src/docs/mask-composite.mdx
index f401285c7..529e1bc82 100644
--- a/src/docs/mask-composite.mdx
+++ b/src/docs/mask-composite.mdx
@@ -27,28 +27,36 @@ Use utilities like `mask-add` and `mask-intersect` to control how an element's m
   {
     <div className="grid grid-cols-2 items-center justify-center justify-items-center gap-y-8 py-4 text-center font-mono text-xs font-medium text-gray-500 max-sm:grid-cols-1 dark:text-gray-400">
       <div className="relative grid justify-center">
-        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
-        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3">mask-add</p>
-        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-add"></div>
+        <div className="relative mx-auto w-48">
+          <div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="absolute top-1/2 left-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="h-24 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-add"></div>
+        </div>
       </div>
       <div className="relative grid justify-center">
-        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
-        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3 text-center">mask-subtract</p>
-        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-subtract"></div>
+        <div className="relative mx-auto w-48">
+          <div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="absolute top-1/2 left-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="h-24 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-subtract"></div>
+        </div>
       </div>
       <div className="relative grid justify-center">
-        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
-        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3 text-center">mask-intersect</p>
-        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-intersect"></div>
+        <div className="relative mx-auto w-48">
+          <div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="absolute top-1/2 left-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="h-24 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-intersect"></div>
+        </div>
       </div>
       <div className="relative grid justify-center">
-        <div className="absolute top-[calc(25%-2px)] right-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
-        <div className="absolute top-[calc(25%-2px)] left-[calc(5%-2px)] box-content size-24 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
         <p className="mb-3 text-center">mask-exclude</p>
-        <div className="h-24 w-48 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-exclude"></div>
+        <div className="relative mx-auto w-48">
+          <div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="absolute top-1/2 right-[calc(2.8%)] box-content size-[6.33rem] -translate-y-1/2 rounded-full border-2 border-dashed border-black/10 dark:border-white/20" />
+          <div className="h-24 bg-[url(https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80)] mask-[radial-gradient(ellipse_25%_50%_at_30%_50%,_white_100%,transparent_100%),_radial-gradient(ellipse_25%_50%_at_70%_50%,_white_100%,transparent_100%)] bg-cover bg-center mask-exclude"></div>
+        </div>
       </div>
     </div>
   }