update partner and animation

Author: Darmody

src/pages/index.module.css

@@ -603,9 +603,9 @@ a.blogLink:hover {
 }
 
 .memberItem {
+  position: relative;
   display: flex;
   height: 20.875rem;
-  position: relative;
 }
 
 @media screen and (max-width: 996px) {
@@ -636,12 +636,17 @@ a.blogLink:hover {
 
 @media screen and (max-width: 996px) {
   .member.active {
-    width: 70vw;
+    width: 60vw;
+  }
+
+  .memberItem:nth-child(odd)>.member.active {
+    left: 1rem;
+    right: unset;
   }
 
   .memberItem:nth-child(even)>.member.active {
     left: unset;
-    right: 0;
+    right: 1rem;
   }
 }
 
@@ -752,9 +757,9 @@ a.blogLink:hover {
 .partnersLayout {
   display: grid;
   width: 100%;
-  grid-template-columns: repeat(4, 10.75rem);
+  grid-template-columns: repeat(6, 10.75rem);
   justify-content: space-between;
-  gap: 2.5rem;
+  gap: 2rem;
   margin-top: 2.5rem;
 }
 

src/pages/index.tsx

@@ -607,14 +607,14 @@ function MemberCard({ member }: { member: Member }) {
   return (
     <motion.div {...whileInViewAnimation} className={styles.memberItem}>
       <motion.div
-        whileTap={{
-          scale: 1.2,
-        }}
-        whileHover={{
-          scale: 1.2,
+        initial={{ scale: 1 }}
+        animate={{
+          scale: active ? 1.2 : 1,
         }}
+        exit={{ scale: 1 }}
         transition={{ type: "spring", stiffness: 100 }}
         className={clsx(styles.member, { [styles.active]: active })}
+        onPointerDownCapture={(event) => event.stopPropagation()}
         onClick={() => {
           setActive(true);
         }}
@@ -628,7 +628,10 @@ function MemberCard({ member }: { member: Member }) {
         {active && (
           <Close
             className={styles.memberClose}
+            // @ts-ignore
+            onPointerDownCapture={(event) => event.stopPropagation()}
             onClick={(event) => {
+              event.preventDefault();
               event.stopPropagation();
               setActive(false);
             }}