Add a divider between logos

Author: hasparus

src/components/index-page/trusted-by/index.tsx

@@ -102,7 +102,7 @@ export function TrustedBy() {
       </div>
       <div
         className={clsx(
-          "mt-6 flex flex-wrap justify-center bg-neu-400 md:my-12 xl:my-16 xl:grid xl:grid-cols-5 xl:gap-px",
+          "mt-6 grid grid-cols-2 justify-center gap-px md:my-12 xl:my-16 xl:grid-cols-5",
           styles.logos,
         )}
       >

src/components/index-page/trusted-by/style.module.css

@@ -1,11 +1,22 @@
-.logos > a {
-  transition: background-color 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
+.logos {
+  background-image: radial-gradient(
+    ellipse at 50% 50%,
+    hsl(var(--color-neu-600)) 0%,
+    transparent 75%
+  );
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
 
-  & :is(svg, path) {
-    transition: fill 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
-  }
+  & > a {
+    transition: background-color 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    & :is(svg, path) {
+      transition: fill 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
 
-  &:not(:hover) :is(svg, path) {
-    fill: hsl(var(--color-neu-600));
+    &:not(:hover) :is(svg, path) {
+      fill: hsl(var(--color-neu-600));
+    }
   }
 }