feat: some shit?

src/components/Max.astro

@@ -10,12 +10,15 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid grid-cols-[250px_1fr] h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
 >
-  <div class="image">
+  <div
+    class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
+  >
     <Image
       src={MaxImg}
       alt="its mee"
+      class="object-bottom h-full object-cover w-1/2 xs:w-full"
       hash={false}
       maxWidth={700}
       loader={false}
@@ -28,7 +31,7 @@ const t = useTranslations(Astro.url);
     </div>
   </div>
 
-  <div class="content gap-2">
+  <div class="content flex flex-col p-8 pl-4 gap-2 justify-center">
     <h1 class="text-2xl">{t("home.title")}</h1>
     <p>{t("home.subtitle")}</p>
   </div>
@@ -36,13 +39,11 @@ const t = useTranslations(Astro.url);
 
 <style>
   .image {
-    position: relative;
-    height: 130%;
-    align-self: end;
-    overflow: hidden;
     border-bottom-left-radius: var(--border-radius-md);
-    display: flex;
-    align-items: flex-end;
+  }
+
+  .googley-eye-target {
+    height: calc(100% - 30px);
   }
 
   .image::before {
@@ -72,12 +73,4 @@ const t = useTranslations(Astro.url);
     top: 31%;
     right: 12%;
   }
-
-  .content {
-    padding: 30px;
-    padding-left: 15px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
 </style>