diff --git a/main/styleguide/source/_patterns/templates/person.mustache b/main/styleguide/source/_patterns/templates/person.mustache
index 021b0eba4c9f46f112a7a7279d8f7d8420b21122..496b240834bd0e1a8e664ebd14b18506415ea94e 100644
--- a/main/styleguide/source/_patterns/templates/person.mustache
+++ b/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>
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index c6d4a5306e2f13ce3bc1f0c2c7c4cf5dd490d717..1ef55bbeccfe9e426f6ec3b528fd820cda8ab81b 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/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%);
   }
 }