[WIP] person

main/styleguide/source/_patterns/templates/person.mustache

@@ -85,19 +85,19 @@
       </h2>
       <div class="__js-root twitter-carousel-root">
       <ui-twitter-carousel>
-        <div class="md:w-1/3 lg:w-1/4 pr-2">
+        <div class="w-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="md:w-1/3 lg:w-1/4 pr-2">
+        <div class="w-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="md:w-1/3 lg:w-1/4 pr-2">
+        <div class="w-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="md:w-1/3 lg:w-1/4">
+        <div class="w-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
-        <div class="md:w-1/3 lg:w-1/4">
+        <div class="w-full flex max-w-xs">
           {{> molecules-twitter-box }}
         </div>
       </ui-twitter-carousel>

main/styleguide/source/css/molecules/carousels.pcss

@@ -186,12 +186,12 @@
     top: -2.6rem;
   }
   &:before {
+    background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
     content: '';
     height: 100%;
-    position: absolute;
     right: 0;
+    position: absolute;
     width: 20%;
     z-index: 100;
-    background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
   }
 }