Disable boardcard animations for mobile.

src/scenes/home/team/team.js

@@ -23,14 +23,15 @@ class Team extends Component {
   render() {
     const team = this.state.members.map(member => (
       <TeamCard
-        key={`${Math.random()} + ${member.name}`}
+        key={`${member.name} + ${member.role}`}
         name={member.name}
         role={member.role}
       />
     ));
 
     const boardMembers = BoardMembers.map(boardMember => (
       <BoardCard
+        key={`${boardMember.name} + ${boardMember.role}`}
         name={boardMember.name}
         role={boardMember.role}
         description={boardMember.description}

src/shared/components/boardCard/boardCard.css

@@ -63,3 +63,25 @@
   align-self: left;
   padding: 1rem 0 0 0;
 }
+
+@media screen and (max-width: 450px) {
+  .boardCard {
+    max-height: 650px;
+    transition: none;
+  }
+
+  .boardCard:hover,
+  .boardCard:focus {
+    transition: none;
+  }
+
+  .boardCard:hover .descriptionText,
+  .boardCard:active .descriptionText {
+    transition: none;
+  }
+
+  .descriptionText {
+    opacity: 1;
+    visibility: visible;
+  }
+}