Fix mask composite guides alignment (#2195)

Fixes #2194

The math for the `top-[calc(25%-2px)]` classes were incorrect. The
percentage should correspond to:

```
Where
  u is a spacing unit, `0.25em`
  L is the "mask-add/subtract/…" text's `line-height` = 0.75rem * ( 1 / 0.75 ) = 1rem = 4u
  M is the "mask-add/subtract/…" text's `mb-3` = 3u
  H is the masked images' height, `h-24` = 24u

Then
  Total height, T = L + M + H
                  = 4u + 3u + 24u
                  = 31u

  Masked image top offset, Q = L + M
                             = 4u + 3u
                             = 7u

  As a percentage = Q ÷ T
                  = 7u ÷ 31u × 100%
                  ≈ 22.6%
```

Thus to line everything up, the top should be `top-[calc(700%/31-2px)]`.

However, since the bottom of each grid element is aligned to the bottom
of the images, I'd thought it'd be simpler to offset the guide elements'
Y position based of the bottom. Thus, we'd only need to offset their
border width `2px`, with `-bottom-[2px]`.

| Before | After |
| --- | --- |
|
![Before](https://github.com/user-attachments/assets/027007ea-b247-4b75-9b13-41929a0b374a)
|
![After](https://github.com/user-attachments/assets/6e1f08b9-e4f3-4cb8-8bac-59b8ca610e64)
|

Perhaps ideally we'd use a CSS variable to DRY all the `2px` border
width offsets but that seemed out of scope of this PR.

Author: wongjn

Diff for: src/docs/mask-composite.mdx

@@ -27,26 +27,26 @@ 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" />
+        <div className="absolute -bottom-[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 -bottom-[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>
       <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" />
+        <div className="absolute -bottom-[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 -bottom-[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>
       <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" />
+        <div className="absolute -bottom-[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 -bottom-[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>
       <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" />
+        <div className="absolute -bottom-[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 -bottom-[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>