Fix basic copy outline breakpoint issue

.nvmrc

@@ -1 +1 @@
-20.12.2
+22.2.0

components/AnimatedComponent/AnimatedComponent.tsx

@@ -17,6 +17,7 @@ export type AllowedElement =
   | 'ul'
   | 'li'
   | 'legend'
+  | 'aside'
   | 'main';
 
 export const AnimatedElement = ({

components/Basic Copy/BasicCopy.module.sass

@@ -1,9 +1,4 @@
 .Outer
-    margin-top: 100px
-    grid-template-columns: 1fr 320px
-    gap: 120px
-    margin-bottom: 200px
-
     main
         &>*:first-child
             margin-top: 0px
@@ -43,11 +38,8 @@
                 aspect-ratio: 16/9
 
     aside > div
-        position: sticky
-        top: 80px
 
         ul li
-            margin: 10px 0px
 
             button
                 display: block
@@ -59,11 +51,3 @@
                 &:hover
                     opacity: 1
 
-@media(max-width: 1024px)
-    .Outer
-        display: block
-        margin-top: 50px
-        margin-bottom: 50px
-
-        aside
-            display: none

components/Basic Copy/BasicCopy.tsx

@@ -26,44 +26,47 @@ export default function BasicCopy({
     <section
       className={clsx(
         s.Outer,
-        'post-content flex w-full',
-        allH2s.length > 0 && showOutline && 'md:grid'
+        'post-content flex w-full gap-12 mt-24 mb-48'
       )}
     >
       <AnimatedElement innerRef={mainRef} type="main" delay={250}>
         <PortableText value={copy} />
       </AnimatedElement>
       {allH2s.length > 0 && showOutline ? (
-        <aside>
-          <AnimatedElement type="div" delay={300}>
-            <h5>{outlineHeading}</h5>
-            <ul>
-              {allH2s.map(({ _key, children }, index) => {
+        <AnimatedElement
+            type="aside"
+            delay={100}
+            className={clsx('wrap hidden w-max max-w-[25vw]', 'lg:block')}
+        >
+          <div className="sticky top-12">
+            <h5 className="text-nowrap text-xl font-medium tracking-wider uppercase">{outlineHeading}</h5>
+            <ul className="mt-2 flex flex-col gap-1">
+              {allH2s.map(({_key, children}, index) => {
                 const textContent = children[0]?.text;
 
                 return (
-                  <li key={_key}>
-                    <button
-                      className="hover:text-primary"
-                      onClick={() => {
-                        const target = mainRef.current?.querySelector(
-                          `h2:nth-of-type(${index + 1})`
-                        );
-                        target?.scrollIntoView({
-                          behavior: 'smooth',
-                          offsetTop: 100,
-                        });
-                      }}
-                    >
-                      {textContent}
-                    </button>
-                  </li>
+                    <li key={_key}>
+                      <button
+                          className="hover:text-primary"
+                          onClick={() => {
+                            const target = mainRef.current?.querySelector(
+                                `h2:nth-of-type(${index + 1})`
+                            );
+                            target?.scrollIntoView({
+                              behavior: 'smooth',
+                              offsetTop: 100,
+                            });
+                          }}
+                      >
+                        {textContent}
+                      </button>
+                    </li>
                 );
               })}
             </ul>
-          </AnimatedElement>
-        </aside>
-      ) : null}
+          </div>
+        </AnimatedElement>
+        ) : null}
     </section>
   );
 }