Make Hero responsive

astro/src/components/web/Hero.astro

@@ -19,11 +19,11 @@ const hero = Astro.props.hero;
         />
 
         <div class="absolute flex items-center w-full h-screen bg-[#00000082] z-10">
-            <div class="absolute text-white md:left-40 sm:left-20 p-8 z-30">
+            <div class="absolute text-white lg:left-40 lg:p-8 p-16 z-30">
                 <div class="flex flex-col gap-2.5 text-left">
-                    <h1 class="text-white font-bold text-8xl w-fit">{hero.title}</h1>
+                    <h1 class="text-white font-bold md:text-8xl sm:text-7xl text-6xl w-fit">{hero.title}</h1>
                     { hero.text !== null && (
-                        <div class="text-2xl max-w-170">{hero.text}</div>
+                        <div class="lg:text-2xl text-lg max-w-170">{hero.text}</div>
                     ) }
                 </div>
             </div>

astro/src/components/web/TextWithImage.astro

@@ -15,14 +15,17 @@ const imageSize = () => {
 }
 ---
 
-<div id={`textwithimage-${textWithImage.id}`} class={`flex ${textWithImage.imageSide === "right" ? "flex-row" : "flex-row-reverse"} justify-between items-center py-12 px-12 container mx-auto gap-y-8 gap-x-18`}>
-    <div class="flex flex-col gap-2.5 w-[50%]">
+<div
+    id={`textwithimage-${textWithImage.id}`}
+    class={`flex ${textWithImage.imageSide === "right" ? "lg:flex-row flex-col" : "lg:flex-row-reverse flex-col"} justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18`}
+>
+    <div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
         <h2 class="text-5xl font-bold">{textWithImage.title}</h2>
         { textWithImage.text !== null && (
             <div set:html={markdownToHtml(textWithImage.text)}></div>
         ) }
     </div>
-    <div class="w-[50%]">
+    <div class="lg:w-[50%] w-full">
         <Image
             src={textWithImage.image.url}
             width={textWithImage.image.width}