make it responsive

src/components/design/Slider.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="mt-[10vh] grid h-[50svh] w-full grid-cols-2 gap-2">
-    <div class="relative flex h-full flex-col">
+  <div class="mt-[10vh] grid h-[50svh] w-full grid-cols-12 gap-2">
+    <div
+      class="columns-gap relative col-span-full flex h-full flex-col sm:col-span-6"
+    >
       <div>
-        <p class="heading-4 mb-14 max-w-[35ch] font-semibold leading-none">
+        <p
+          class="heading-4 mb-14 line-clamp-3 min-h-28 max-w-[35ch] font-semibold leading-none sm:min-h-40"
+        >
           {{ people[index].quote }}
         </p>
         <div class="heading-6 mb-6 font-semibold">
@@ -20,22 +24,27 @@
         </div>
       </div>
 
-      <div class="flex h-full items-end justify-end">
+      <div class="mt-10 flex h-full items-end justify-between">
+        <div class="heading-6 flex w-1/2 items-center gap-3 sm:w-1/5">
+          <p>{{ index + 1 }}</p>
+          <p class="h-0.5 w-full bg-black"></p>
+          <p>{{ people.length }}</p>
+        </div>
         <div class="flex gap-3">
           <Button label="Prev" @click="clickPrev" />
           <Button label="Next" @click="clickNext" />
         </div>
       </div>
     </div>
 
-    <div class="flex-center w-full">
-      <div class="relative">
-        <img
-          class="aspect-[1/1.2] rounded-lg object-cover object-top mix-blend-screen brightness-90 grayscale"
-          :src="people[index].profile"
-          alt=""
-        />
-      </div>
+    <div
+      class="flex-center columns-gap order-first col-span-full w-full sm:order-last sm:col-span-6"
+    >
+      <img
+        class="h-[50vh] w-full rounded-lg object-cover object-top mix-blend-screen brightness-90 grayscale sm:h-[85vh]"
+        :src="people[index].profile"
+        alt=""
+      />
     </div>
   </div>
 </template>