Add dual cols to sponsorship page

Author: MrDogeBro

src/pages/sponsorships.tsx

@@ -13,7 +13,7 @@ import { Footer } from '@ui/Footer';
 interface Props {}
 
 const Sponsorships: React.FC<Props> = () => {
-  const sponsorshipContent = `
+  const sponsorshipContentCol1 = `
 # Integrations
 
 ## Intros
@@ -37,7 +37,9 @@ these, see Dedicated/Videos.
 | Price (GBP) | Price (USD) |
 | ----------- | ----------- |
 | 150         | 190         |
+  `;
 
+  const sponsorshipContentCol2 = `
 # Dedicated
 
 ## Videos
@@ -75,18 +77,26 @@ start with #ad.
       <div className="flex flex-col min-h-screen">
         <Navbar />
         <div className="flex justify-center">
-          <h1 className="text-brand-gradient font-brand text-4xl text-center mt-10 mb-5 uppercase">
+          <h1 className="mt-10 mb-5 text-4xl text-center uppercase text-brand-gradient font-brand">
             Sponsorships
           </h1>
         </div>
         <div className="grow">
-          <div className="font-sans text-white text-md mt-4 mx-6 sm:mx-10 md:w-text md:mx-auto">
-            <ReactMarkdown
-              children={sponsorshipContent}
-              className="text-white font-sans unreset markdown grow"
-              remarkPlugins={[remarkGfm, remarkSlug]}
-              rehypePlugins={[rehypeRaw]}
-            />
+          <div className="flex justify-center mx-6 mt-4 font-sans text-white text-md sm:mx-10">
+            <div className="flex flex-col gap-8 md:flex-row">
+              <ReactMarkdown
+                children={sponsorshipContentCol1}
+                className="font-sans text-white unreset markdown grow max-w-text shrink basis-0"
+                remarkPlugins={[remarkGfm, remarkSlug]}
+                rehypePlugins={[rehypeRaw]}
+              />
+              <ReactMarkdown
+                children={sponsorshipContentCol2}
+                className="font-sans text-white unreset markdown grow max-w-text shrink basis-0"
+                remarkPlugins={[remarkGfm, remarkSlug]}
+                rehypePlugins={[rehypeRaw]}
+              />
+            </div>
           </div>
         </div>
         <Footer />