From c0dd22f32c7b07595d3e45851cc6e8ccc119345b Mon Sep 17 00:00:00 2001
From: Maxim Stogniy <i.dual.ce@gmail.com>
Date: Wed, 6 May 2020 19:17:42 +1200
Subject: [PATCH] Reviews adaptive complete

---
 src/styles/blocks/avatar.pcss         | 11 +++++++++++
 src/styles/blocks/reivew.pcss         | 22 +++++++++++++++++++--
 src/styles/blocks/reviews-slider.pcss | 17 +++++++++++++++-
 src/styles/blocks/reviews.pcss        | 20 +++++++++++++++++++
 src/styles/blocks/user.pcss           | 28 ++++++++++++++++++++++++---
 5 files changed, 92 insertions(+), 6 deletions(-)

diff --git a/src/styles/blocks/avatar.pcss b/src/styles/blocks/avatar.pcss
index e7cc281..ab110a7 100644
--- a/src/styles/blocks/avatar.pcss
+++ b/src/styles/blocks/avatar.pcss
@@ -4,10 +4,21 @@
   height: 200px;
   overflow: hidden;
   border-radius: 50%;
+  flex-shrink: 0;
+
+  @include tablets {
+    width: 170px;
+    height: 170px;
+  }
 
   &--small {
     width: 75px;
     height: 75px;
+
+    @include phones {
+      width: 50px;
+      height: 50px;
+    }
   }
 }
 
diff --git a/src/styles/blocks/reivew.pcss b/src/styles/blocks/reivew.pcss
index 11a0385..9b9dd44 100644
--- a/src/styles/blocks/reivew.pcss
+++ b/src/styles/blocks/reivew.pcss
@@ -2,6 +2,10 @@
   display: flex;
   height: 100%;
 
+  @include tablets {
+    font-size: 14px;
+  }
+
   &:before {
     width: 75px;
     height: 75px;
@@ -10,6 +14,16 @@
     margin-right: 20px;
     opacity: 0.05;
     flex-shrink: 0;
+
+    @include desktop {
+      width: 70px;
+      height: 70px;
+    }
+
+    @include tablets {
+      width: 30px;
+      height: 30px;
+    }
   }
 }
 
@@ -22,8 +36,12 @@
   opacity: .5;
   font-weight: 600;
   line-height: 30px;
-  padding-bottom: 10px; // временное решение
-  padding-right: 60px;
+  padding-bottom: 10px;
+  padding-right: 10px;
+
+  @include phones {
+    padding-bottom: 20px;
+  }
 }
 
 .review__author {
diff --git a/src/styles/blocks/reviews-slider.pcss b/src/styles/blocks/reviews-slider.pcss
index dece953..eaee9f4 100644
--- a/src/styles/blocks/reviews-slider.pcss
+++ b/src/styles/blocks/reviews-slider.pcss
@@ -1,5 +1,10 @@
 .reviews-slider {
   max-width: 1008px;
+
+  @include phones {
+    overflow: hidden;
+    max-width: 400px;
+  }
 }
 
 .reviews-slider__buttons {
@@ -15,8 +20,18 @@
 .revies-slider__list {
   display: flex;
   justify-content: space-between;
+
+  @include phones {
+    overflow: hidden;
+    justify-content: flex-start;
+  }
 }
 
 .reviews__slider-item {
-  width: 50%;
+  width: 45%;
+  flex-shrink: 0;
+  
+  @include phones {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/blocks/reviews.pcss b/src/styles/blocks/reviews.pcss
index 6f44a0a..5aaaf2b 100644
--- a/src/styles/blocks/reviews.pcss
+++ b/src/styles/blocks/reviews.pcss
@@ -2,14 +2,34 @@
   position: relative;
   margin-bottom: 155px;
   padding-top: 230px;
+
+  @include desktop {
+    padding-top: 200px;
+  }
 }
 
 .reviews__title {
   display: flex;
   align-items: center;
   margin-bottom: 90px;
+
+  @include phones {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 30px;
+  }
 }
 
 .reviews__title-text {
   margin-right: 120px;
+
+  @include desktop {
+    margin-right: 75px;
+  }
+
+  @include phones {
+    margin-right: 0;
+    margin-bottom: 25px;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/blocks/user.pcss b/src/styles/blocks/user.pcss
index 8aa16ae..f2cf278 100644
--- a/src/styles/blocks/user.pcss
+++ b/src/styles/blocks/user.pcss
@@ -9,9 +9,19 @@
       margin-right: 30px;
     }
 
-     .user__name {
-       margin-bottom: 10px;
-     }
+    .user__name {
+      margin-bottom: 10px;
+    }
+
+    @include tablets {
+      .user__name {
+        font-size: 16px;
+      }
+
+      .user__avatar {
+        margin-right: 20px;
+      }
+    }
   }
 }
 
@@ -19,6 +29,10 @@
   display: flex;
   justify-content: center;
   margin-bottom: 80px;
+
+  @include phones {
+    margin-bottom: 30px;
+  }
 }
 
 .user__data {
@@ -38,6 +52,14 @@
   opacity: .3;
 }
 
+.user__data-value {
+  padding-left: 5%;
+
+  @include phones {
+    padding-left: 6%;
+  }
+}
+
 .user__name {
   font-size: 18px;
   font-weight: 700;