Add mobile and tablet styles

src/hbs/index.hbs

@@ -95,12 +95,12 @@ team:
     author: 'Douglas Hofstadter'
   profiles:
     - name: 'Doge Doe'
-      image: ''
+      image: 'images/dog-profile.png'
     - location: 'New York'
       name: 'Jessica Angel'
-      image: ''
+      image: 'images/jessica-profile.png'
     - name: 'Jason Teutsch'
-      image: ''
+      image: 'images/jason-profile.png'
     - location: 'Toronto'
       name: 'Robbie Bent'
       image: ''

src/hbs/partials/components/profile.hbs

@@ -1,10 +1,10 @@
 <div class="profile {{ class }}">
 
-  <figure class="profile__image">
-
+  <figure class="profile__image-wrapper">
+    <div class="profile__image" style="background-image: url('{{ profile.image }}')"></div>
   </figure>
 
-  <div class="profile__detail">
+  <div class="profile__detail profile__detail--index-{{ index }}">
     <h6 class="profile__location">
       {{#if profile.location }}
         {{ profile.location }}

src/hbs/partials/components/team.hbs

@@ -14,6 +14,7 @@
     <div class="team__profiles">
       {{#each team.profiles as |profile| }}
         {{> components/profile
+          index=@index
           class="team__profile"
           profile=profile
         }}

src/styles/components/_profile.scss

@@ -1,15 +1,18 @@
 .profile {
-  &__image {
+  &__image-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0;
     background-color: $color-white;
+  }
 
-    &::after {
-      padding-bottom: 114%;
-      content: close-quote;
-    }
+  &__image {
+    width: 100%;
+    height: 100%;
+    padding-bottom: 114%;
+    background-position: center center;
+    background-size: cover;
   }
 
   &__location,
@@ -20,10 +23,64 @@
   }
 
   &__location {
-    font-size: 16px;
+    font-size: 12px;
   }
 
   &__name {
-    font-size: 30px;
+    font-size: 24px;
+
+    @media #{$screen-md} {
+      font-size: 32px;
+    }
+
+    @media #{$screen-lg} {
+      font-size: 48px;
+    }
+  }
+
+  &__detail {
+    margin-top: 10px;
+
+    @media #{$screen-md} {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      margin: 0;
+
+      &--index {
+        &-0 {
+          transform: translate(-20%, -150%);
+        }
+
+        &-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%);
+        }
+      }
+    }
   }
 }

src/styles/components/_team.scss

@@ -16,15 +16,30 @@
 
   &__container {
     @include container;
+
+    position: relative;
   }
 
   &__header {
     margin-bottom: 20px;
+
+    @media #{$screen-md} {
+      position: absolute;
+      top: 42%;
+      z-index: 1;
+    }
+  }
+
+  &__counter {
+    font-size: 20px;
+
+    @media #{$screen-md} {
+      font-size: 24px;
+    }
   }
 
   &__quote {
     margin-bottom: 20px;
-    font-weight: 300;
 
     &__text {
       margin: 0;
@@ -35,15 +50,109 @@
       font-weight: 600;
       text-transform: uppercase;
     }
+
+    @media #{$screen-md} {
+      max-width: 40%;
+      font-size: 24px;
+      font-weight: 300;
+    }
+  }
+
+  &__profiles {
+    @media #{$screen-xs} {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+    }
   }
 
   &__profile {
-    margin-bottom: 20px;
+    margin: 10px 0 25px;
+    text-align: center;
 
     @for $i from 1 through length($profile-colors) {
       &:nth-of-type(#{$i}) {
         color: nth($profile-colors, $i);
       }
     }
+
+    @media #{$screen-xs} {
+      width: calc(50% - 10px);
+    }
+
+    @media #{$screen-md} {
+      max-width: 250px;
+      margin: 40px 0;
+      text-align: left;
+
+      &:nth-of-type(1) {
+        transform: translate(30%, 0);
+      }
+
+      &:nth-of-type(2) {
+        transform: translate(20%, -55%);
+      }
+
+      &:nth-of-type(3) {
+        transform: translate(0, 10%);
+      }
+
+      &:nth-of-type(4) {
+        transform: translate(10%, 10%);
+      }
+
+      &:nth-of-type(5) {
+        transform: translate(5%, -40%);
+      }
+
+      &:nth-of-type(6) {
+        transform: translate(-10%, 5%);
+      }
+
+      &:nth-of-type(7) {
+        transform: translate(80%, 0%);
+      }
+
+      &:nth-of-type(8) {
+        transform: translate(-30%, 10%);
+      }
+    }
+
+    @media #{$screen-md} {
+      max-width: 250px;
+      margin: 30px 0;
+
+      &:nth-of-type(1) {
+        transform: translate(30%, 0);
+      }
+
+      &:nth-of-type(2) {
+        transform: translate(20%, -55%);
+      }
+
+      &:nth-of-type(3) {
+        transform: translate(0, 10%);
+      }
+
+      &:nth-of-type(4) {
+        transform: translate(10%, 10%);
+      }
+
+      &:nth-of-type(5) {
+        transform: translate(5%, -40%);
+      }
+
+      &:nth-of-type(6) {
+        transform: translate(-10%, 5%);
+      }
+
+      &:nth-of-type(7) {
+        transform: translate(80%, 0%);
+      }
+
+      &:nth-of-type(8) {
+        transform: translate(-30%, 10%);
+      }
+    }
   }
 }