some edit

blocks/feature245.tsx

@@ -7,7 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 
 const handwrittenTextClasses =
-  "flex gap-3 font-handwriting text-xs tracking-tight md:text-xl";
+  "flex min-w-0 items-center gap-2 font-handwriting text-xs tracking-tight xl:gap-3 xl:text-xl";
 
 const FEATURES = [
   { id: "dark-mode", label: "ترافیک ارگانیک" },
@@ -97,9 +97,13 @@ interface Feature245Props {
 
 const Feature245 = ({ className }: Feature245Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("bg-background", className)}>
-      <div className="relative container flex flex-col items-center overflow-hidden py-32">
-        <div className="mx-auto max-w-3xl text-center">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative w-full min-w-0 overflow-hidden bg-background", className)}
+    >
+      <div className="relative container flex min-w-0 flex-col items-center overflow-hidden py-16 md:py-24 lg:py-32">
+        <div className="mx-auto w-full min-w-0 max-w-3xl px-4 text-center">
           <h1 className="text-2xll font-semibold tracking-tighter text-balance text-foreground md:text-2xll">
             رتبه کلمات کلیدی را پیگیری کنید
           </h1>
@@ -107,8 +111,8 @@ const Feature245 = ({ className }: Feature245Props) => {
             تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
           </p>
         </div>
-        <div className="relative z-10 mx-auto mt-12 min-h-full max-w-3xl md:w-1/2">
-          <div className="absolute -start-52 z-10 hidden h-full flex-col items-end justify-between md:flex lg:-start-62">
+        <div className="relative z-10 mx-auto mt-12 w-full min-w-0 max-w-3xl px-4 lg:w-1/2 lg:px-0">
+          <div className="absolute -start-40 z-10 hidden h-full flex-col items-end justify-between xl:flex xl:-start-52 2xl:-start-62">
             {[0, 1, 2, 3].map((i) => (
               <motion.div
                 key={FEATURES[i].id}
@@ -129,7 +133,7 @@ const Feature245 = ({ className }: Feature245Props) => {
               </motion.div>
             ))}
           </div>
-          <div className="absolute -end-58 z-10 hidden h-full flex-col justify-between md:flex lg:-end-64">
+          <div className="absolute -end-40 z-10 hidden h-full flex-col justify-between xl:flex xl:-end-52 2xl:-end-64">
             {[4, 5, 6, 7].map((i) => (
               <motion.div
                 key={FEATURES[i].id}
@@ -152,12 +156,12 @@ const Feature245 = ({ className }: Feature245Props) => {
           </div>
 
           <motion.div
-            initial={{ opacity: 0, y: 200 }}
-            animate={{ opacity: 100, y: 0 }}
+            initial={{ opacity: 0, y: 40 }}
+            animate={{ opacity: 1, y: 0 }}
             transition={{ ease: [0.33, 1, 0.68, 1], duration: 0.8 }}
-            className="relative z-0"
+            className="relative z-0 w-full min-w-0"
           >
-            <Card className="group h-130 w-full rounded-4xl border border-border bg-background p-2 shadow-none lg:p-3">
+            <Card className="group aspect-[4/3] h-auto max-h-80 w-full rounded-4xl border border-border bg-background p-2 shadow-none sm:max-h-96 xl:h-130 xl:max-h-none xl:aspect-auto lg:p-3">
               <CardContent className="size-full rounded-3xl border-2 border-background bg-muted">
                 <img
                   src="/block-media/shadcnblocks/block/placeholder-1.svg"