make experience layout to fit mobile

views/partials/experience-partial.html

@@ -1,22 +1,21 @@
 {{ block "experience-partial" . }}
-<h2 class="text-3xl font-bold m-6">Experience</h2>
-<div class="flex flex-row m-10 mb-4">
-  <p class="font-bold text-lg">
-    For all jobs mentioned below I was an employee of
-  </p>
-  <p class="font-bold text-lg italic underline ml-1.5">Idpassglobal</p>
+<h2 class="text-lg md:text-3xl font-bold m-6 mb-3">Experience</h2>
+
+<div class="flex flex-row m-10 mb-2 mt-1 text-sm md:text-lg">
+  <section class="font-bold">
+    For all jobs mentioned below I was an employee of <span class="italic underline">Idpassglobal</span>
+  </section>
 </div>
 <div class="m-10 mb-6">
   {{ range . }} {{ template "experience-partial-range" . }} {{ end }}
 </div>
+
 {{ end }} {{block "experience-partial-range" . }}
-<div class="grid grid-cols-[7rem_1rem_auto]">
-  <!-- <div class="flex flex-row"> -->
-  <div class="text-right font-bold text-xs leading-none">{{.StartFrom}}</div>
-  <!-- <div class="grid grid-cols-[1rem_auto] ml-2"> -->
+<div class="lg:grid grid-cols-[10rem_1rem_auto] hidden">
+  <div class="text-right font-bold leading-none">{{.StartFrom}}</div>
   <div class="flex flex-col items-center leading-none ml-2">
-    <span class="w-2.5 h-2.5 rounded-full bg-black"></span>
-    <span class="w-0.5 flex-grow bg-black"></span>
+    <span class="w-2.5 h-2.5 rounded-full bg-secondary dark:bg-white/20"></span>
+    <span class="w-0.5 flex-grow bg-secondary dark:bg-white/20"></span>
   </div>
   <div class="m-5">
     <div class="flex flex-row">
@@ -29,7 +28,31 @@
       <li class="m-2">{{.}}</li>
       {{ end }}
     </ul>
-    <!-- </div> -->
+  </div>
+</div>
+
+<div class="block lg:hidden">
+  <div class="flex flex-col space-y-2 font-semibold text-start text-sm p-4 rounded-lg border-2 border-secondary dark:border-darksecondary shadow-md">
+
+    <!-- Dates -->
+    <p>{{ .StartFrom }}</p>
+
+    <!-- Company + Type -->
+    <p>
+      {{ .Company }}
+      <span> – {{ .EmployeeType }}</span>
+    </p>
+
+    <!-- Position -->
+    <p>{{ .Position }}</p>
+
+    <!-- Tasks -->
+    <ul class="list-disc list-inside mt-2 space-y-1 font-normal">
+      {{ range .Tasks }}
+        <li class="leading-snug">{{ . }}</li>
+      {{ end }}
+    </ul>
+
   </div>
 </div>
 {{ end }}