updated look

components/mdx/SideNote.tsx

@@ -1,12 +1,8 @@
 export function SideNote({ children, title }: { children: React.ReactNode; title?: string }) {
     return (
-        <aside className="my-6 p-4 bg-zinc-50 dark:bg-zinc-900/50 border-l-2 border-zinc-300 dark:border-zinc-700 text-sm text-zinc-600 dark:text-zinc-400 font-light italic rounded-r-lg lg:absolute lg:right-0 lg:w-64 lg:mr-[-20rem] lg:my-0 lg:p-0 lg:bg-transparent lg:dark:bg-transparent lg:border-0 lg:not-italic lg:rounded-none">
-            {/* Mobile/Tablet view: distinct block */}
-            {/* Desktop view: Absolute positioning to the right margin */}
-            <span className="lg:block lg:text-xs lg:leading-relaxed">
-                {title && <strong className="block mb-1 text-zinc-900 dark:text-zinc-200 not-italic">{title}</strong>}
-                {children}
-            </span>
-        </aside>
+        <span role="note" className="side-note">
+            {title ? <strong>{title}</strong> : null}
+            {children}
+        </span>
     );
 }