Improve responsiveness

index.html

@@ -53,11 +53,11 @@
     <header class="flex w-full overflow-hidden pt-16 pb-12">
         <!-- Navbar -->
         <nav id="nav" x-data="{ open: false }" role="navigation" class="w-full pb-5">
-            <div class="container mx-auto flex items-center px-12 md:px-24 lg:px-36">
+            <div class="container mx-auto flex items-center px-8 md:px-12 lg:px-36">
                 <div class="flex text-4xl font-semibold font-poppins whitespace-nowrap">
                     JOCHEM LOEDEMAN
                 </div>
-                <div class="container flex justify-end">
+                <div class="container flex justify-end invisible sm:visible">
                     <div class="flex space-x-6 text-gray-600">
                         <a class="transition duration-300 hover:opacity-75" href="https://www.instagram.com"
                             target="_blank" rel="noreferrer">
@@ -92,7 +92,7 @@
         </nav>
     </header>
     <!-- Content -->
-    <div class="container mx-auto px-12 md:px-24 lg:px-36">
+    <div class="container mx-auto px-8 md:px-12 lg:px-36">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-5">
             <div class="flex flex-col gap-y-5">
                 <img src="/assets/images/P1070346-Enhanced-RD Large.jpeg">