loop through faces in members header

src/js/main.js

@@ -46,6 +46,9 @@ if(pathName == '/') {
     document.getElementById('email'));
 
   ReactDOM.render(
-    members(),
+    React.createElement('div', {}, [
+      members({key: 0}),
+      members({key: 1})
+    ]),
     document.getElementById('members'));
 }

src/styles/_header.styl

@@ -1,8 +1,10 @@
+headerHeight = 400px
+
 .header
   background url('../images/jumbo.jpg')
   background-position bottom center
   background-size cover
-  height 400px
+  height headerHeight
   overflow hidden
   position relative
   width 100%
@@ -103,20 +105,58 @@
     width 100%
     height auto
 
+@keyframes spin
+  0%
+    top 0
+  50%
+    top -(headerHeight)
+  50.0001%
+    top headerHeight
+  100%
+    top 0
+
+@keyframes spin2
+  0%
+    top (headerHeight)
+  50%
+    top 0
+  99.99999%
+    top -(headerHeight)
+  100%
+    top (headerHeight)
+
 .header__members
+  width 100%
+  height 100%
   z-index -1
   position absolute
   top 0
   left 0
-  height 100%
+
   .member
     margin 0
     border-radius 0
     width (100/18)%
 
+    @media screen and (min-width: 2000px)
+      width 5%
     @media screen and (max-width: 1200px)
       width (100/15)%
     @media screen and (max-width: 810px)
       width 10%
-    @media screen and (min-width: 2000px)
-      width 5%
+    @media screen and (max-width: 450px)
+      width 20%
+
+  .members
+    position absolute
+    overflow hidden
+    top 0
+    left 0
+    right 0
+    height headerHeight
+    animation spin 10s infinite linear
+    &:first-child
+      z-index 1
+    &:last-child
+      animation spin2 10s infinite linear
+