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>
 
     <div class="profile__detail profile__detail--index-{{ index }}">
       <h6 class="profile__location">
-      {{#if profile.location }}
-        {{ profile.location }}
-      {{else}}
-        undisclosed
-      {{/if}}
+        {{#if profile.location }} {{ profile.location }} {{else}} undisclosed {{/if}}
       </h6>
 
       <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%);
       }
     }
   }