Mobile version almost done. Still missing the footer.

components/AboutUs.tsx

@@ -3,7 +3,7 @@ import Carousel from "../islands/Carousel.tsx";
 const AboutUs = () => (
   <div className="bg-black py-16 md:grid grid-cols-7">
     <div className="col-span-1"></div>
-    <div className="col-span-5 text-gray-50 font-light flex flex-col gap-8">
+    <div className="col-span-5 text-gray-50 font-light flex flex-col gap-8 mx-4 md:mx-0">
       <h1 className="text-6xl text-left font-light">About Us</h1>
       <div className="md:grid grid-cols-3 gap-8">
         <div className="flex flex-row gap-4">

components/Events.tsx

@@ -3,9 +3,9 @@ import Card from '../islands/Card.tsx';
 const Events = () => (
   <section className="md:grid grid-cols-7 bg-gray-200 py-16" id="events">
     <div className="col-span-1"></div>
-    <div className="col-span-5 flex flex-col gap-4">
+    <div className="col-span-5 flex flex-col items-center gap-4 mx-4 md:mx-0">
       <h1 className="text-4xl">Events</h1>
-      <div className="flex flex-col md:grid grid-cols-3 gap-8">
+      <div className="flex flex-col md:grid grid-cols-2 xl:grid-cols-3 gap-8">
         <Card 
           type="event"
           image_path="https://picsum.photos/560"

components/Footer.tsx

@@ -4,22 +4,22 @@ import IconPhone from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/phone.tsx"
 import IconMail from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/mail.tsx"
 
 const Footer = () => (
-  <footer class="flex flex-col gap-8 bg-black py-8 text-gray-50 font-light">
-    <div class="md:grid grid-cols-7">
+  <footer class="flex flex-col items-center md:gap-8 bg-black pb-8 md:py-8 text-gray-50 font-light">
+    <div class="flex flex-col items-center gap-4 md:grid grid-cols-7">
       <div class="col-span-1"></div>
       <div class="col-span-1">
         <img src="/logo.png" alt="ET logo" width="200px" />
       </div>
       <div class="col-span-1"></div>
-      <div class="col-span-3 flex flex-row gap-8 justify-end">
-        <div class="flex flex-col gap-8">
+      <div class="col-span-3 flex flex-col md:flex-row gap-4 md:gap-8 justify-end">
+        <div class="flex flex-col gap-4 md:gap-8">
           <p>English theater improv club</p>
           <div class="flex flex-col gap-2">
             <a href="#events" title="Jump to events" class="hover:text-gray-500">Events</a>
             <a href="#productions" title="Jump to productions" class="hover:text-gray-500">Productions</a>
           </div>
         </div>
-        <div class="flex flex-col gap-8">
+        <div class="flex flex-col gap-4 md:gap-8">
           <p>Contact</p>
           <div class="flex flex-col">
             <IconMail class="w-6 h-6" />
@@ -39,8 +39,8 @@ const Footer = () => (
       <div class="col-span-1"></div>
     </div>
     <div class="mx-16 h-[1px] bg-[#303C64]"></div>
-    <div class="mx-16 flex justify-between items-center">
-      <div class="flex flex-row items-center gap-4">
+    <div class="md:mx-16 flex flex-col md:flex-row gap-4 md:gap-0 justify-between items-center">
+      <div class="flex flex-col md:flex-row items-center gap-4">
         <a href="https://fresh.deno.dev">
           <img
             width="197"
@@ -51,7 +51,7 @@ const Footer = () => (
         </a>
         <a href="https://github.com/evilmonkey19/et_theater" class="px-3 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 flex gap-2"><IconBrandGithub class="w-6 h-6" />Go to the repo</a>
       </div>
-      <p>Made with ❤️ by&nbsp;
+      <p class="text-balance w-32 md:w-full">Made with ❤️ by&nbsp;
         <a href="https://www.linkedin.com/in/yan-zhang-899960244/" class="hover:text-gray-500">Yan Zhang (Designer)</a>
         &nbsp;&&nbsp;
         <a href="https://perpinya.eu/en" class="hover:text-gray-500">Enric Perpinyà (Programmer)</a> 

components/Landing.tsx

@@ -2,26 +2,26 @@ const Landing = () => (
   <div className="h-svh bg-cover md:bg-contain bg-right bg-no-repeat bg-black md:grid grid-cols-7" 
     style={{ backgroundImage: "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background_landing.webp')" }}>
         <div className="col-span-1"></div>
-        <div className="col-span-5 h-svh flex flex-col justify-center items-left gap-8 text-gray-50 mx-4 md:mx-0">
-          <div className="md:h-16"></div>
+        <div className="col-span-5 flex flex-col justify-center items-left gap-8 text-gray-50 mx-4 md:mx-0">
+          <div className="h-16"></div>
           <p className="text-6xl md:text-8xl text-left text-balance">English Theater Improv Club</p>
           <div className="flex gap-4 w-max-32">
             <p className="font-rye text-6xl md:text-8xl text-[#5063a1] self-place-top h-24">“</p>
             <p className="text-pretty md:text-balance font-light leading-loose self-center text-lg">We are a theater association based in Stockholm, Sweden. 
             We try to bring the joy of <span className="font-bold">improv and theater</span> to local and international students.</p>
           </div>
-          <div className="flex flex-col md:flex-row gap-2 md:gap-4 items-center text-xl">
-            <a href="/" className="group">
-              <svg class="stroke-[#159288] group-hover:fill-[#159288]" height="120" width="215" xmlns="http://www.w3.org/2000/svg">
+          <div className="flex flex-row gap-4 items-center text-xl w-full">
+            <a href="/" className="group w-56">
+              <svg class="stroke-[#159288] group-hover:fill-[#159288] max-md:fill-[#159288]" viewBox="0 0 215 120" xmlns="http://www.w3.org/2000/svg">
                 <polygon points="10,10 200,10 200,90 70,90 20,115 30,90 10,90" class="stroke-[3]" />
-                <text x="60" y="60" class="group-hover:stroke-gray-50 group-hover:fill-gray-50 fill-[#159288] font-sans text-3xl stroke-1">Hire us</text>
+                <text x="60" y="60" class="group-hover:stroke-gray-50 group-hover:fill-gray-50 fill-[#159288] max-md:fill-gray-50 max-md:stroke-gray-50 font-sans text-3xl stroke-1">Hire us</text>
               </svg>
             </a>
-            <a href="/" class="group">
-              <svg class="stroke-[#b961c1] group-hover:fill-[#b961c1]" height="120" width="215" xmlns="http://www.w3.org/2000/svg">
-              <polygon points="10,10 200,10 200,90 70,90 20,115 30,90 10,90" class="stroke-[3]" />
-                  <text x="60" y="60" class="group-hover:stroke-gray-50 group-hover:fill-gray-50 fill-[#b961c1] font-sans text-3xl stroke-1">Join us</text>
-                </svg> 
+            <a href="/" class="group w-56">
+              <svg class="stroke-[#b961c1] group-hover:fill-[#b961c1] max-md:fill-[#b961c1]" viewBox="0 0 215 120" xmlns="http://www.w3.org/2000/svg">
+                <polygon points="10,10 200,10 200,90 70,90 20,115 30,90 10,90" class="stroke-[3]" />
+                <text x="60" y="60" class="group-hover:stroke-gray-50 group-hover:fill-gray-50 fill-[#b961c1] max-md:fill-gray-50 max-md:stroke-gray-50 font-sans text-3xl stroke-1">Join us</text>
+              </svg>
             </a>
           </div>
         <div className="col-span-1"></div>

components/Productions.tsx

@@ -3,9 +3,9 @@ import Card from '../islands/Card.tsx';
 const Productions = () => (
   <section className="md:grid grid-cols-7 bg-black py-16 text-gray-50" id="productions">
     <div className="col-span-1"></div>
-    <div className="col-span-5 flex flex-col gap-4">
+    <div className="col-span-5 flex flex-col items-center gap-4 mx-4 md:mx-0">
       <h1 className="text-4xl">Productions</h1>
-      <div className="flex flex-col md:grid grid-cols-3 gap-8">
+      <div className="flex flex-col md:grid grid-cols-2 xl:grid-cols-3 gap-8">
         <Card
           type="production"
           image_path="https://picsum.photos/700"

components/Sessions.tsx

@@ -1,7 +1,7 @@
 const Sessions = () => (
   <div className="py-32 bg-fill bg-no-repeat md:grid grid-cols-7" style="background-image: url('actors.webp')">
     <div className="col-span-1"></div>
-    <div className="col-span-5 flex flex-col justify-center items-center gap-8 text-gray-50">
+    <div className="col-span-5 flex flex-col justify-center items-center gap-8 text-gray-50 mx-4 md:mx-0">
       <p className="text-6xl md:text-8xl text-center text-balance">Improv Sessions every Wednesday!</p>
       <p className="text-center text-2xl">It's open to everyone, come join us in Nymble, Drottning Kristinas väg 15-19, 3rd floor!</p>
       <a className="bg-[#ea7af4] py-4 px-8 text-4xl hover:bg-[#ffd461]" href="/">Sign up!</a>