custom <Link /> wrapper around next/link

components/Content/Content.module.css

@@ -3,28 +3,6 @@
   line-height: 1.7;
 }
 
-.content a {
-  color: var(--link);
-  background-image: linear-gradient(var(--link-underline), var(--link-underline));
-  background-position: 0% 100%;
-  background-repeat: no-repeat;
-  background-size: 0% var(--link-underline-size);
-  padding-bottom: var(--link-underline-size);
-  /* background-size is for hover animation, color & border are for theme fading: */
-  transition: background-size 0.25s ease-in-out, color 0.25s ease, border 0.25s ease;
-}
-
-.content a:hover {
-  background-size: 100% var(--link-underline-size);
-}
-
-/* set an anchor's class to `no-underline` to disable all of the above */
-.content :global(a.no-underline) {
-  background: none;
-  padding-bottom: 0;
-  transition: none;
-}
-
 @media screen and (max-width: 768px) {
   .content {
     font-size: 0.925em;

components/Content/Content.tsx

@@ -1,12 +1,11 @@
 import classNames from "classnames";
-import type { ReactNode } from "react";
+import type { PropsWithChildren } from "react";
 
 import styles from "./Content.module.css";
 
-type Props = {
-  children: ReactNode;
+type Props = PropsWithChildren<{
   className?: string;
-};
+}>;
 
 const Content = ({ className, ...rest }: Props) => <div className={classNames(styles.content, className)} {...rest} />;