feat(clinic): simplify image rendering logic and improve layout handling in List component

components/clinic/components/about/images/List.js

@@ -6,34 +6,22 @@ function List({ data }) {
   const images_clinic = data?.images_clinic || [];
   const lengthImgClinics = images_clinic.length;
 
+  // عکس اول به‌صورت بزرگ در Images.js نمایش داده می‌شود؛ اینجا بقیه‌ی عکس‌ها را نشان می‌دهیم.
+  const rest = images_clinic.slice(1);
+
   return (
     <div
       className={`hidden w-full md:grid gap-[16px] lg:gap-[24px]
-        ${lengthImgClinics === 1
+        ${rest.length === 0
           ? "md:!hidden"
-          : lengthImgClinics === 2
+          : rest.length === 1
             ? "grid-cols-1 grid-rows-1"
-            : lengthImgClinics === 3
+            : "grid-cols-2 auto-rows-fr"
-              ? "grid-cols-1 grid-rows-2"
-              : lengthImgClinics === 4
-                ? "grid-cols-2 grid-rows-2"
-                : ""
         }
       `}
     >
-      {images_clinic.map((img, idx) =>
+      {rest.map((img, idx) => (
-        idx !== 0 ? (
+        <div key={idx} className="h-full w-full">
-          <div
-            key={idx}
-            className={`${lengthImgClinics === 3
-                ? "h-full"
-                : lengthImgClinics === 4
-                  ? idx === lengthImgClinics - 1
-                    ? "w-[calc(200%+16px)] lg:w-[calc(200%+24px)]"
-                    : "w-full h-full"
-                  : "h-full w-full"
-              }`}
-          >
           <CustomLoading width="full" height={190}>
             <Image
               className="rounded-[8px] overflow-hidden w-full h-full object-cover"
@@ -44,8 +32,7 @@ function List({ data }) {
             />
           </CustomLoading>
         </div>
-        ) : undefined
+      ))}
-      )}
     </div>
   );
 }