Update livestream layout to grid

Author: tcaldwell-x

snippets/broadcast-carousel.mdx

@@ -5,6 +5,7 @@ export const BroadcastCarousel = ({ broadcasts }) => {
   if (broadcasts.length === 0) {
     return null;
   }
+  
   const sorted = [...broadcasts].sort((a, b) => {
     const dateA = a.date ? new Date(a.date) : null;
     const dateB = b.date ? new Date(b.date) : null;
@@ -16,7 +17,7 @@ export const BroadcastCarousel = ({ broadcasts }) => {
   });
 
   return (
-    <div className="flex overflow-x-auto overflow-y-hidden gap-5 py-5">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 py-5">
       {sorted.map((broadcast, index) => {
         if (!broadcast.url) return null;
         return (
@@ -25,7 +26,7 @@ export const BroadcastCarousel = ({ broadcasts }) => {
             href={broadcast.url} 
             target="_blank"
             rel="noopener noreferrer"
-            className="block not-prose text-inherit no-underline flex-shrink-0 w-[480px] max-w-[480px] rounded-xl overflow-hidden bg-black border border-gray-700 transition-transform hover:-translate-y-0.5 hover:shadow-lg"
+            className="block not-prose text-inherit no-underline rounded-xl overflow-hidden bg-black border border-gray-700 transition-transform hover:-translate-y-0.5 hover:shadow-lg"
             style={{ margin: 0 }}
           >
             <div 
@@ -42,13 +43,13 @@ export const BroadcastCarousel = ({ broadcasts }) => {
                 style={{ 
                   bottom: '-14%',
                   left: '-7%',
-                  width: '400px',
-                  height: '400px'
+                  width: '300px',
+                  height: '300px'
                 }}
               >
                 <svg 
-                  width="400" 
-                  height="400" 
+                  width="300" 
+                  height="300" 
                   viewBox="0 0 1200 1227" 
                   fill="none" 
                   xmlns="http://www.w3.org/2000/svg"
@@ -60,22 +61,37 @@ export const BroadcastCarousel = ({ broadcasts }) => {
                 </svg>
               </div>
               <div 
-                className="absolute inset-0 flex items-center justify-center text-white cursor-pointer bg-black/30"
+                className="absolute text-white cursor-pointer bg-black/30"
+                style={{ 
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  width: '100%',
+                  height: '100%',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
               >
                 <div 
-                  className="w-20 h-20 rounded-full bg-black/90 border-2 border-white/30 flex items-center justify-center transition-transform hover:scale-110"
+                  className="w-16 h-16 rounded-full bg-black/90 border-2 border-white/30 flex items-center justify-center transition-transform hover:scale-110"
+                  style={{ 
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}
                 >
-                  <div className="text-white text-3xl ml-1">▶</div>
+                  <div className="text-white text-2xl" style={{ marginLeft: '2px' }}>▶</div>
                 </div>
               </div>
             </div>
             {broadcast.title && (
-              <div className="p-4 bg-black border-t border-gray-700">
-                <div className="text-white text-base font-semibold leading-snug mb-1">
+              <div className="p-3 bg-black border-t border-gray-700">
+                <div className="text-white text-sm font-semibold leading-snug mb-1">
                   {broadcast.title}
                 </div>
                 {broadcast.date && (
-                  <div className="text-gray-400 text-sm font-normal leading-snug">
+                  <div className="text-gray-400 text-xs font-normal leading-snug">
                     {broadcast.date}
                   </div>
                 )}