Rend responsive le composant section

src/routes/welcome/+page.svelte

@@ -87,12 +87,12 @@
   </section>
 
   <section
-    class="h-[90%] grid grid-cols-4 gap-x-12 px-40 pb-20 pt-10 bg-[#E3E4D6]"
+    class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6]"
   >
     <h2 class="text-2xl font-light col-span-4 text-center">
       Les caractéristiques du simulateur ⬇️
     </h2>
-    <div class="font-serif text-lg">
+    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
       <div class="text-center">
         <span
           class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
@@ -113,7 +113,7 @@
         <li>modifier les paramètres pour voir les impacts d’une réforme.</li>
       </ul>
     </div>
-    <div class="font-serif text-lg">
+    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
       <div class="text-center">
         <span
           class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
@@ -156,7 +156,7 @@
       </ul>
     </div>
 
-    <div class="font-serif text-lg">
+    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
       <div class="text-center">
         <span
           class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
@@ -177,7 +177,7 @@
 
       <img class="mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
     </div>
-    <div class="font-serif text-lg">
+    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
       <div class="text-center">
         <span
           class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"