fix: footer logo size

src/components/Footer.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
-import GizLogoSvgEN from "@assets/giz_logo_en.svg?react";
-import GizLogoSvgUA from "@assets/giz_logo_ua.svg?react";
+import GizLogoSvgDE from "@assets/giz_logo_de.svg?react";
+import GizImplementedByEN from "@assets/giz_logo_implemented_by.svg?react";
+import GizImplementedByUA from "@assets/giz_logo_implemented_by_ua.svg?react";
 import GizZusammenarbeitSvg from "@assets/giz_zusammenarbeit.svg?react";
 import AtStakeLogoSvg from "@assets/at_stake_logo.svg?react";
 import InstagramIcon from "@assets/instagram.svg?react";
@@ -14,14 +15,14 @@ interface Props {
   locale?: string;
 }
 
+const logoClasses = "w-full";
+
 const Footer: React.FC<Props> = ({ className, menu, locale }: Props) => {
   return (
-    <div
-      className={`w-full flex bg-white py-16 ${className || ""}`}
-    >
+    <div className={`w-full flex bg-white py-16 ${className || ""}`}>
       <div className="container-width flex flex-col justify-between text-black">
         <div className="flex flex-col lg:flex-row">
-          <div className="flex-1 flex flex-col gap-8 text-sm items-start">
+          <div className="flex-[2] flex flex-col gap-8 text-sm items-start">
             <div className="flex gap-4 items-center">
               <TolocarLogoSvg className="h-12" />
               The Tolocar Project
@@ -60,25 +61,36 @@ const Footer: React.FC<Props> = ({ className, menu, locale }: Props) => {
               </div>
             </div>
           </div>
-          <div className="flex-1 flex flex-col sm:gap-[10%] sm:flex-row mt-10 lg:mt-0 gap-0 text-sm sm:h-64">
-            <a
-                className={'mt-10 sm:mt-0 h-full flex-shrink'}
+          <div className="mt-4 lg:mt-0 flex-[3] flex items-center">
+            <div className="flex-1 grid grid-cols-1 md:grid-cols-[1fr_1fr_1fr] grid-rows-[repeat(4,auto)] md:grid-rows-[auto_auto_auto] gap-x-4 gap-y-1">
+              <a
+                className={"md:row-start-2 md:row-span-2"}
                 href="https://www.giz.de"
-                target="_blank">
-              <GizZusammenarbeitSvg className={'h-full w-full'} />
-            </a>
-            <a
-                className={'-mt-12 sm:mt-0 h-full flex-shrink'}
+                target="_blank"
+              >
+                <GizZusammenarbeitSvg className={"w-full"} />
+              </a>
+              {locale === "ua" ? (
+                <GizImplementedByUA className="md:row-start-1 md:col-start-2 mt-8 md:mt-0 w-full" />
+              ) : (
+                <GizImplementedByEN className="md:row-start-1 md:col-start-2 mt-8 md:mt-0 w-full" />
+              )}
+
+              <a
+                className={"md:row-start-2"}
                 href="https://www.giz.de"
-                target="_blank">
-              {locale === "ua" ? <GizLogoSvgUA className={'h-full w-full'} /> : <GizLogoSvgEN className={'h-full w-full'} />}
-            </a>
-            <a
-                className={'h-full flex-shrink'}
+                target="_blank"
+              >
+                <GizLogoSvgDE className={"w-full"} />
+              </a>
+              <a
+                className={"md:row-start-2 relative mt-8 md:mt-0"}
                 href="https://www.at-stake.org/"
-                target="_blank">
-              <AtStakeLogoSvg className={'h-full w-full px-2'}/>
-            </a>
+                target="_blank"
+              >
+                <AtStakeLogoSvg className={"md:absolute h-full w-auto"} />
+              </a>
+            </div>
           </div>
         </div>
         <div className="text-sm text-neutral-500 flex flex-col lg:flex-row gap-2 lg:gap-0 mt-8">