fix ui

src/components/BurgerMenuBtn.vue

@@ -3,7 +3,7 @@
     <div v-bind="$attrs" class="fixed right-7 top-7 z-[20]">
       <div
         id="magneto"
-        class="flex-center size-12 cursor-pointer rounded-full bg-flax-smoke-300 brightness-90 ease-in-out md:size-[4.5rem]"
+        class="flex-center size-14 cursor-pointer rounded-full bg-flax-smoke-300 brightness-90 ease-in-out lg:size-[4.5rem]"
       >
         <span
           class="w-[100%] text-center before:bg-flax-smoke-700 after:bg-flax-smoke-700"

src/components/common/Nav.vue

@@ -17,7 +17,7 @@
     tabindex="0"
     id="navbar"
     @keydown.esc="esc()"
-    class="fixed right-0 top-[1dvh] z-[9998] h-[98dvh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-900 p-5 focus:outline-none max-md:w-[98%] sm:p-10 md:w-3/5 md:px-20 lg:w-2/5"
+    class="fixed right-0 top-[1dvh] z-[9998] h-[98dvh] w-full translate-x-full select-none rounded-s-lg bg-flax-smoke-950 p-5 will-change-transform focus:outline-none max-md:w-[98%] sm:p-10 md:w-3/5 md:px-20 lg:w-2/5"
   >
     <Circles id="circles" class="absolute right-0 top-0 opacity-25" />
     <div class="flex h-full flex-col items-center justify-between">

src/components/sections/People.vue

@@ -1,11 +1,14 @@
 <template>
   <!-- common-padding  -->
-  <section id="people-section" class="relative overflow-y-clip common-padding mx-auto min-h-svh py-0">
+  <section
+    id="people-section"
+    class="common-padding relative mx-auto min-h-svh overflow-y-clip py-0"
+  >
     <div
       class="grid w-full grid-cols-12 border-b-[1px] border-flax-smoke-300 pb-[clamp(2.25rem,2.1786rem_+_0.3571vi,2.5rem)]"
     >
       <h1
-        class="heading-1 max-sm:heading-2 col-span-full font-bold uppercase leading-none text-flax-smoke-950"
+        class="heading-1 max-sm:heading-2 col-span-full font-bold uppercase leading-none text-flax-smoke-950 will-change-auto"
       >
         Don't take my <br />
         word for it /