user review section done

Trillo/starter/sass/_components.scss

@@ -200,7 +200,7 @@
 .overview {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--color-grey-light-2);
+  border-bottom: var(--line);
 
   &__heading {
     font-size: 2.25rem;
@@ -269,8 +269,17 @@
   cursor: pointer;
   transition: all 0.2s;
 
+  & span {
+    margin-left: 3px;
+    transition: margin-left 0.2s;
+  }
+
   &:hover {
     color: var(--color-grey-dark-1);
+
+    & span {
+      margin-left: 8px;
+    }
   }
 
   &:focus {
@@ -293,3 +302,139 @@
     box-shadow: none;
   }
 }
+
+// Paragraph
+.paragraph:not(:last-of-type) {
+  margin-bottom: 2rem;
+}
+
+// List
+.list {
+  display: flex;
+  flex-wrap: wrap; // NOTE: making a grid with 2 columns
+
+  list-style: none;
+
+  margin: 3rem 0;
+  padding: 3rem 0;
+
+  border-top: var(--line);
+  border-bottom: var(--line);
+
+  &__item {
+    flex: 0 0 50%; // NOTE: making a grid with 2 columns
+    margin-bottom: 0.7rem;
+
+    &::before {
+      content: "";
+      display: inline-block;
+      height: 1rem;
+      width: 1rem;
+      margin-right: 0.7rem;
+
+      // NOTE: Older browsers
+      // background-image: url("../img/chevron-thin-right.svg");
+      // background-size: cover;
+
+      // NOTE: Newer browsers - masks
+      // icon mask that lets you see the background color
+      background-color: var(--color-primary);
+      mask-image: url("../img/chevron-thin-right.svg");
+      mask-size: cover;
+    }
+  }
+}
+
+// Recommend
+.recommend {
+  font-size: 1.3rem;
+  color: var(--color-grey-dark-3);
+
+  display: flex;
+  align-items: center;
+
+  &__count {
+    margin-right: auto; // NOTE: trick to make space-between in other way, usefull in case of having multiple elements
+  }
+
+  &__friends {
+  }
+
+  &__photo {
+    box-sizing: content-box; // NOTE: content-box is the default, we changed it on _base.scss
+    height: 4rem;
+    width: 4rem;
+
+    border-radius: 50%;
+    border: 3px solid white;
+
+    &:not(:last-child) {
+      margin-right: -1.5rem;
+    }
+  }
+}
+
+// Reviews
+.review {
+  background-color: white;
+  box-shadow: var(--shadow-light);
+  padding: 3rem;
+  margin-bottom: 3.5rem;
+
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: "\201C"; // NOTE: html entity
+    position: absolute;
+    top: -3.2rem;
+    left: -1rem;
+    font-size: 20rem;
+    font-family: sans-serif;
+    line-height: 1;
+    color: var(--color-grey-light-2);
+
+    z-index: 1;
+  }
+
+  &__text {
+    margin-bottom: 2rem;
+    z-index: 10;
+    position: relative;
+  }
+
+  &__user {
+    display: flex;
+    align-items: center;
+  }
+
+  &__photo {
+    height: 4.5rem;
+    width: 4.5rem;
+    border-radius: 50%;
+
+    margin-right: 1.5rem;
+  }
+
+  &__user-box {
+    margin-right: auto;
+  }
+
+  &__user-name {
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: 0.4rem;
+  }
+
+  &__user-date {
+    font-size: 1rem;
+    color: var(--color-grey-dark-3);
+  }
+
+  &__rating {
+    font-size: 2.2rem;
+    font-weight: 300;
+    color: var(--color-primary);
+  }
+}