Restrict profiles to 33% width on desktop

src/hbs/partials/components/profile.hbs

@@ -1,18 +1,15 @@
 <div class="profile {{ class }}">
+  <div class="profile__container">
+    <figure class="profile__image-wrapper">
+      <div class="profile__image" style="background-image: url('{{ profile.image }}')"></div>
+    </figure>
 
-  <figure class="profile__image-wrapper">
-    <div class="profile__image" style="background-image: url('{{ profile.image }}')"></div>
-  </figure>
+    <div class="profile__detail profile__detail--index-{{ index }}">
+      <h6 class="profile__location">
+        {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}
+      </h6>
 
-  <div class="profile__detail profile__detail--index-{{ index }}">
-    <h6 class="profile__location">
-      {{#if profile.location }}
-        {{ profile.location }}
-      {{else}}
-        undisclosed
-      {{/if}}
-    </h6>
-
-    <h3 class="profile__name">{{new-line profile.name }}</h3>
+      <h3 class="profile__name">{{new-line profile.name }}</h3>
+    </div>
   </div>
 </div>

src/styles/components/_profile.scss

@@ -1,4 +1,12 @@
 .profile {
+  &__container {
+    @media #{$screen-lg} {
+      position: relative;
+      max-width: 250px;
+      margin: 0 auto;
+    }
+  }
+
   &__image-wrapper {
     display: flex;
     align-items: center;
@@ -82,5 +90,47 @@
         }
       }
     }
+
+    @media #{$screen-lg} {
+      &--index {
+        &-0 {
+          transform: translate(-20%, -100%);
+        }
+
+        &-1 {
+          top: 0;
+          transform: translate(80%, -20%);
+        }
+
+        &-2 {
+          transform: translate(-25%, 40%);
+        }
+
+        &-3 {
+          transform: translate(-20%, 50%);
+        }
+
+        &-4 {
+          transform: translate(20%, 45%);
+        }
+
+        &-5 {
+          transform: translate(55%, -60%);
+        }
+
+        &-6 {
+          transform: translate(-20%, 25%);
+        }
+
+        &-7 {
+          transform: translate(-30%, 40%);
+        }
+      }
+    }
+  }
+
+  @media #{$screen-lg} {
+    width: 33%;
+    max-width: initial;
   }
 }

src/styles/components/_team.scss

@@ -118,40 +118,39 @@
       }
     }
 
-    @media #{$screen-md} {
+    @media #{$screen-lg} {
       max-width: 250px;
-      margin: 30px 0;
 
       &:nth-of-type(1) {
-        transform: translate(30%, 0);
+        transform: translate(0%, 0);
       }
 
       &:nth-of-type(2) {
-        transform: translate(20%, -55%);
+        transform: translate(0%, 0%);
       }
 
       &:nth-of-type(3) {
-        transform: translate(0, 10%);
+        transform: translate(0, 0%);
       }
 
       &:nth-of-type(4) {
-        transform: translate(10%, 10%);
+        transform: translate(0%, 0%);
       }
 
       &:nth-of-type(5) {
-        transform: translate(5%, -40%);
+        transform: translate(0%, 0%);
       }
 
       &:nth-of-type(6) {
-        transform: translate(-10%, 5%);
+        transform: translate(0%, 0%);
       }
 
       &:nth-of-type(7) {
-        transform: translate(80%, 0%);
+        transform: translate(0%, 0%);
       }
 
       &:nth-of-type(8) {
-        transform: translate(-30%, 10%);
+        transform: translate(0%, 0%);
       }
     }
   }