Responsive background images and cleaup

src/lib/assets/images/left.svelte

@@ -1,5 +1,5 @@
 <svg
-	width="324"
+	class="absolute -left-24 w-80 xl:left-0"
 	height="640"
 	viewBox="0 0 324 640"
 	fill="none"

src/lib/assets/images/right.svelte

@@ -1,4 +1,11 @@
-<svg width="255" height="637" viewBox="0 0 255 637" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+	class="absolute -right-20 xl:right-0"
+	width="255"
+	height="637"
+	viewBox="0 0 255 637"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<rect x="72" width="64" height="64" rx="8" fill="#D5D5D5" />
 	<rect x="72" y="71" width="64" height="64" rx="8" fill="#D5D5D5" />
 	<rect x="216" y="71" width="64" height="64" rx="8" fill="#D5D5D5" />

src/lib/components/sections/Hero.svelte

@@ -44,15 +44,13 @@
 <div class="mb-16 flex w-full flex-col">
 	<div class="relative flex w-full flex-row items-center justify-between gap-1 py-10 md:mb-10">
 		<!-- BG Images -->
-		<div class="flex-1">
-			<span class="hidden md:block">
+		<div class="h-full flex-1">
+			<span class="relative hidden h-full md:block">
 				<LeftImage />
 			</span>
 			<span class="md:hidden">
 				<MobLeftImage />
 			</span>
-			<!-- <img class="hidden md:block xl:max-w-[60%]" src={base + '/images/left.png'} alt="left" /> -->
-			<!-- <img class="md:hidden" src={base + '/images/mob-left.png'} alt="left" /> -->
 		</div>
 
 		<!-- Center part -->
@@ -110,16 +108,13 @@
 			</div>
 		</div>
 		<!-- BG Images -->
-		<div class="flex flex-1 justify-end">
-			<span class="hidden md:block">
+		<div class="flex h-full flex-1 justify-end overflow-hidden">
+			<span class="relative hidden h-[640px] md:block">
 				<RightImage />
 			</span>
 			<span class=" md:hidden">
 				<MobRightImage />
 			</span>
-
-			<!-- <img class="hidden md:block xl:max-w-[50%]" src={base + '/images/right.png'} alt="right" /> -->
-			<!-- <img class="md:hidden" src={base + '/images/mob-right.png'} alt="right" /> -->
 		</div>
 	</div>