fix: layout shifting and showing overflow

src/components/Donate/How/How.astro

@@ -33,10 +33,11 @@ import FeaturedGroup from "../../ui/FeaturedGroup.astro";
   }
 </style>
 
-<section id="how" class="relative">
+<section id="how" class="relative overflow-hidden max-w-[100vw]">
-  <div class="custom-bg -mx-10"></div>
+  <div class="custom-bg"></div>
-  <div class="max-w-3xl px-7 mx-10 md:mx-20 lg:mx-40">
+  <div
-    <div class="bg-black/50 p-3 lg:bg-transparent lg:p-0">
+    class="max-w-3xl bg-black/50 p-3 lg:bg-transparent lg:p-0 mx-10 md:mx-20 lg:mx-40"
+  >
     <FeaturedGroup
       subtitle="Donate via Gitcoin during funding rounds"
       title="How should I donate?"
@@ -49,5 +50,4 @@ import FeaturedGroup from "../../ui/FeaturedGroup.astro";
       label="Gitcoin"
     />
   </div>
-  </div>
 </section>

src/components/Donate/Jumbotron/Jumbotron.astro

@@ -4,7 +4,7 @@ import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
 
 <section
   id="jumbotron"
-  class="relative w-full h-[420px] flex items-center justify-center"
+  class="relative w-full h-[420px] flex items-center justify-center max-w-[100vw] overflow-hidden"
 >
   <img
     src={backgroundSrc.src}

src/components/Donate/Legal/Legal.astro

@@ -1,4 +1,4 @@
-<section id="legal" class="mx-20 lg:mx-40 pb-40">
+<section id="legal" class="mx-10 lg:mx-40 pb-40">
   <h2 class="text-3xl lg:text-4xl font-display my-10">Tax and Legal</h2>
   <p class="text-lg lg:text-xl font-body text-body my-5">
     <strong

src/components/Donate/Methods/Methods.astro

@@ -168,15 +168,17 @@ await addCurrency(
     }
   }
 </style>
-<section id="methods" class="mx-10 md:mx-20 lg:mx-40">
+<section id="methods">
-  <div>
+  <div class="mx-5 md:mx-20 lg:mx-40">
     <h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
-    <div class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-[10px]">
+    <div
+      class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-y-[10px] lg:gap-x-[10px]"
+    >
       {
         currencies.map((currency) => (
           <div
             id={"donate-" + currency.id}
-            class={`hover:ring-2 flex flex-col bg-black rounded-md px-10 py-5 w-full max-w-[calc(100vw-30px)] lg:max-w-none lg:w-[calc(50%-20px)]`}
+            class={`hover:ring-2 flex flex-col bg-black rounded-md p-5 w-full max-w-[calc(100vw-40px)] lg:max-w-none lg:w-[calc(50%-20px)]`}
             style={`--tw-ring-color: ${currency.mainColor}`}
           >
             <div class="flex flex-row flex-1 gap-x-4 w-full justify-between">
@@ -206,9 +208,11 @@ await addCurrency(
         ))
       }
     </div>
+  </div>
+  <div class="mx-5 md:mx-20 lg:mx-40 max-w-[calc(100vw-40px)]">
     <h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
     <div
-      class="flex flex-col items-center justify-between gap-4 lg:flex-row lg:flex-wrap"
+      class="flex flex-col items-center justify-between gap-y-4 lg:gap-x-4 lg:flex-row lg:flex-wrap"
     >
       <div
         id="donate-paypal"
@@ -318,12 +322,13 @@ await addCurrency(
       </div>
     </div>
   </div>
-  <p class="text-lg italic font-body text-body mt-10 mx-10">
+  <p class="text-lg italic font-body text-body mt-5 mx-10">
     If you are interested in donating through other means, please get in touch
     with us to discuss. If there is a cryptocurrency you wish to contribute with
     that we have not listed, please let me know!
   </p>
 </section>
+
 <dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
 </dialog>
 <script is:inline>

src/components/Donate/Why/Why.astro

@@ -6,13 +6,12 @@ import backgroud from "/src/assets/why-bg-2.png";
 
 <section
   id="why"
-  class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20"
+  class="flex flex-col overflow-hidden relative md:flex-row mx-10 md:mx-20 lg:mx-40"
 >
   <img
     src={backgroud.src}
     class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
   />
-  <div class="px-10 md:px-20 py-5">
   <FeaturedGroup
     subtitle="Why should I donate to Lume?"
     title="Help us break the pattern"
@@ -29,5 +28,4 @@ import backgroud from "/src/assets/why-bg-2.png";
     ]}
   />
   <Button label="Donate" href="#methods" />
-  </div>
 </section>

src/pages/donate.astro

@@ -1,10 +1,10 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro";
-import Jumbotron from '../components/Donate/Jumbotron/Jumbotron.astro';
+import Jumbotron from "../components/Donate/Jumbotron/Jumbotron.astro";
-import Why from '../components/Donate/Why/Why.astro';
+import Why from "../components/Donate/Why/Why.astro";
-import How from '../components/Donate/How/How.astro';
+import How from "../components/Donate/How/How.astro";
-import Methods from '../components/Donate/Methods/Methods.astro';
+import Methods from "../components/Donate/Methods/Methods.astro";
-import Legal from '../components/Donate/Legal/Legal.astro';
+import Legal from "../components/Donate/Legal/Legal.astro";
 ---
 
 <Layout view="donate" title="Donate - Lume Web">