fix: mobile layout

index.html

@@ -133,7 +133,7 @@ <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:t
               tickets available to the community.
             </p>
             <div class="mt-5 sm:mt-8 mx-auto">
-              <div class="flex flex-col md:flex-row gap-8 md:gap-8 justify-center">
+              <div class="flex flex-row gap-8 md:gap-8 justify-center">
                 <a href="https://www.meetup.com/barcelonajs/" class="block w-12">
                   <img src="/media/social/meetup.svg" alt="meetup" class="">
                 </a>
@@ -514,8 +514,8 @@ <h2 class="text-base text-red-600 font-semibold tracking-wide uppercase">
 
 
   <div id="workshops" class="py-12">
-    <div class="max-w-3xl mb-10 mx-auto sm:px-6 lg:px-8 borrce">
-      <div class="lg:text-center bg-neutral-900 rounded-2xl px-20 py-16 border border-neutral-700"
+    <div class="max-w-3xl mb-10 mx-auto lg:px-8 px-4 sm:px-6">
+      <div class="lg:text-center bg-neutral-900 rounded-2xl p-6 sm:px-20 sm:py-16  border border-neutral-700"
         style="background: url('/media/workshops/bg.jpg') round">
         <h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
           Workshops
@@ -526,15 +526,15 @@ <h2 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:t
         </p>
 
         <div class="mt-4 max-w-2xl text-xl text-neutral-100 lg:mx-auto">
-          <div class="flex flex-row items-center gap-6 justify-center">
-            <div>
-              <img src="/media/workshops/bcnjs.svg" alt="BarcelonaJS" class="w-52 object-cover">
+          <div class="grid gap-4 sm:gap-6 justify-center items-center" style="grid-template-columns: 1fr 1rem 1fr;">
+            <div class="sm:py-3">
+              <img src="/media/workshops/bcnjs.svg" alt="BarcelonaJS" class="object-cover">
             </div>
             <div>
-              <img src="/media/workshops/x.svg" alt="separator" class="w-6 object-cover">
+              <img src="/media/workshops/x.svg" alt="separator" class="object-cover">
             </div>
             <div>
-              <img src="/media/workshops/cmdn.svg" alt="CMDN" class="w-52 object-cover">
+              <img src="/media/workshops/cmdn.svg" alt="CMDN" class="object-cover">
             </div>
           </div>
         </div>
@@ -612,4 +612,4 @@ <h2 class="text-base text-red-600 font-semibold tracking-wide uppercase">
   <script defer src="menu.js"></script>
 </body>
 
-</html>
+</html>