Why us: colored logos right after the heading, cards below

src/pages/index.astro

@@ -170,6 +170,16 @@ const clients = [
       <h2 class="display max-w-3xl text-5xl sm:text-6xl">
         Почему выбирают нас<span class="dot">.</span>
       </h2>
+
+      <!-- Client logos -->
+      <div class="mt-12">
+        <div class="grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-10 sm:grid-cols-3 lg:grid-cols-5">
+          {clients.map((src) => (
+            <img src={src} alt="Логотип заказчика" class="max-h-24 w-auto max-w-[220px] object-contain" loading="lazy" />
+          ))}
+        </div>
+      </div>
+
       <div class="mt-16 grid gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
         {whyUs.map((w, i) => (
           <div class="border-t-2 border-night-950 pt-6">
@@ -179,16 +189,6 @@ const clients = [
           </div>
         ))}
       </div>
-
-      <!-- Client logos -->
-      <div class="mt-20 border-t border-slate-200 pt-14">
-        <h3 class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">Наши заказчики</h3>
-        <div class="mt-10 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-10 sm:grid-cols-3 lg:grid-cols-5">
-          {clients.map((src) => (
-            <img src={src} alt="Логотип заказчика" class="max-h-24 w-auto max-w-[220px] object-contain opacity-70 grayscale transition hover:opacity-100 hover:grayscale-0" loading="lazy" />
-          ))}
-        </div>
-      </div>
     </div>
   </section>