fix respons mobile home

templates/partials/header.html

@@ -2,9 +2,9 @@
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
 <header id="header-container">
-    <div class="z-20 bg-black2 absolute w-full">
+    <div class="z-20 absolute w-full">
         <div class="relative z-50">
-        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-2 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
+        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
                 <a href="{{get_url(path='/')}}" class="flex">
                     <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
@@ -113,12 +113,12 @@
             </div>
         </div>
         </div>
-{% for header_item in header_items %}
+                        {% for header_item in header_items %}
-{% if not loop.first %}
+                          {% if not loop.first %}
-    {% set header_arr = header_item | split(pat="</li>") %}
+                              {% set header_arr = header_item | split(pat="</li>") %}
-    {% set header_label = header_arr[0] %}
+                              {% set header_label = header_arr[0] %}
-    {% set header_menu = header_arr[1] %}
+                              {% set header_menu = header_arr[1] %}
-    {% set menu_id = header_label ~ "-menu" | slugify %}
+                              {% set menu_id = header_label ~ "-menu" | slugify %}
 
 <nav>
     <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">

templates/partials/home/farmers.html

@@ -2,15 +2,15 @@
   <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
     <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
       <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">Powering the Grid Together</h2>
-      <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
+      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
         Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”. 
       </p>
 </div>
 <section class="pb-32 bg-transparent">
-  <div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
+  <div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
     <div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
-      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
-        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
           <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
             1. HOST A NODE
           </dt>
@@ -20,7 +20,7 @@
             </p>
           </dd>
         </div>
-        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
           <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
             2. OFFER CAPACITY
           </dt>
@@ -31,7 +31,7 @@
             </p>
           </dd>
         </div>
-        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
           <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
             3. EARN REWARDS
           </dt>

templates/partials/home/features.html

@@ -1,6 +1,6 @@
 <div class="bg-transparent">
   <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
-    <div class="max-w-3xl px-16 pb-12">
+    <div class="max-w-3xl lg:px-16 px-0 pb-12">
       <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">ThreeFold is the Infrastructure Layer of Web 4
       </h2>
       <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>

templates/partials/home/grid_stats.html

@@ -1,5 +1,5 @@
 <div class="bg-transparent relative isolate overflow-hidden py-12 mb-12">
-    <img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover">
+    <img src="images/map_white.png" alt="" class="fade-in absolute inset-0 -z-10 size-full object-cover md:block hidden">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="mx-auto max-w-2xl lg:max-w-none">
         <div class="text-center">