fix: elkarlanaren interfazea hobetzen du

front/src/views/ekintza/_components/Elkarlana.astro

@@ -12,26 +12,29 @@ const { elkarlana } = Astro.props;
 <div>
   <h2>{elkarlana.label}</h2>
 
-  {
+  <div class="erakundeak-wrapper">
-    elkarlana.erakundeak?.map((erakundea) => {
+    {
-      const irudia = erakundea.logo ? getImageData(erakundea.logo) : null;
+      elkarlana.erakundeak?.map((erakundea) => {
+        const irudia = erakundea.logo ? getImageData(erakundea.logo) : null;
 
-      return (
+        return (
-        <a href={erakundea.esteka}>
+          <a href={erakundea.esteka}>
-          {irudia && (
+            {irudia ? (
-            <img
+              <img
-              src={irudia.src}
+                src={irudia.src}
-              height={irudia.height}
+                height={irudia.height}
-              width={irudia.width}
+                width={irudia.width}
-              alt={irudia.alt}
+                alt={irudia.alt}
-            />
+                aria-label={erakundea.izena}
-          )}
+              />
-
+            ) : (
-          <span>{erakundea.izena}</span>
+              erakundea.izena
-        </a>
+            )}
-      );
+          </a>
-    })
+        );
-  }
+      })
+    }
+  </div>
 </div>
 
 <style lang="scss">
@@ -59,7 +62,8 @@ const { elkarlana } = Astro.props;
     color: var(--marroia);
     text-decoration: none;
 
-    transition: opacity 0.3s ease-in;
+    transition: opacity 0.3s ease-in-out;
+    cursor: pointer;
 
     @include displayFonts.display6;
 
@@ -88,4 +92,14 @@ const { elkarlana } = Astro.props;
       height: var(--space-08-desktop);
     }
   }
+
+  .erakundeak-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-04-mobile);
+
+    @include mediaQueries.aboveTablet {
+      gap: var(--space-05-desktop);
+    }
+  }
 </style>