Shift geometric elements for large screens, improve display of About …

…section on small screens

src/scss/base/_mixins.scss

@@ -4,6 +4,12 @@
   );
 }
 
+@mixin desktop() {
+  @media (min-width: #{$desktop-width - 1 + px}) {
+    @content;
+  }
+}
+
 @mixin laptop() {
   @media (max-width: #{$laptop-width - 1 + px}) {
     @content;

src/scss/base/_vars.scss

@@ -2,6 +2,8 @@
 $container-width: 1180;
 
 // Breakpoints
+$four-k-width: 2560;
+$desktop-width: 1500;
 $max-width: 1280;
 $laptop-width: 1072;
 $tablet-width: 768;

src/scss/blocks/_about.scss

@@ -4,19 +4,29 @@
   position: relative;
 
   #about1 {
-    width: 1115px;
-    height: 1100px;
-    top: adaptive-value(200, 300);
-    right: adaptive-value(-150, -150);
+    width: adaptive-value(1115, 800);
+    top: adaptive-value(200, 200);
+    right: adaptive-value(-160, -150);
     transform: translate(50%, -50%);
+
+    @include desktop {
+      right: adaptive-value(-350, -200, $four-k-width, $desktop-width);
+    }
   }
 
   #about2 {
-    width: 945px;
-    height: 869px;
-    top: adaptive-value(400, 750);
-    left: adaptive-value(-40, -30);
+    width: adaptive-value(945, 700);
+    top: adaptive-value(300, 300, $max-width, $tablet-width);
+    left: adaptive-value(0, -5);
     transform: translate(-50%, -50%);
+
+    @include tablet {
+      top: adaptive-value(675, 650, $tablet-width - 1, $min-width);
+    }
+
+    @include desktop {
+      left: adaptive-value(0, 75, $four-k-width, $desktop-width);
+    }
   }
 
   &__content {
@@ -64,10 +74,26 @@
     grid-area: photo;
     margin: 0 0 15px 0;
 
+    @include tablet {
+      max-height: 400px;
+    }
+
+    @include mobile {
+      max-height: 350px;
+    }
+
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
+
+      @include tablet {
+        object-position: 0 adaptive-value(-100, -50, 767, 424);
+      }
+
+      @media (max-width: 330px) {
+        object-position: center;
+      }
     }
   }
 

src/scss/blocks/_common.scss

@@ -10,18 +10,19 @@
   &__btn {
     display: inline-block;
     font-size: adaptive-value(16, 15);
-    color: $light-color;
+    color: $background-color;
     font-weight: 600;
     background-color: $accent-color;
     padding: 15px adaptive-value(30, 16);
     margin: 2px;
     transition:
       color 0.2s,
       background-color 0.2s;
+    text-align: center;
     @media (hover: hover) {
       &:hover {
         color: $accent-color;
-        background-color: $light-color;
+        background-color: $background-color;
         border: 2px solid $accent-color;
         margin: 0;
       }
@@ -33,4 +34,10 @@
   position: absolute;
   z-index: -1;
   overflow: hidden;
+  height: auto;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
 }

src/scss/blocks/_education.scss

@@ -4,11 +4,14 @@
   position: relative;
 
   #education1 {
-    width: 945px;
-    height: 869px;
-    top: adaptive-value(400, 300);
+    width: adaptive-value(1000, 900);
+    top: adaptive-value(400, 350);
     left: adaptive-value(0, -50);
     transform: translate(-50%, -50%);
+
+    @include desktop {
+      left: adaptive-value(-150, -50, $four-k-width, $desktop-width);
+    }
   }
 
   &__list {

src/scss/blocks/_faq.scss

@@ -4,11 +4,14 @@
   position: relative;
 
   #faq1 {
-    width: 1280px;
-    height: 1062px;
+    width: adaptive-value(1000, 950);
     bottom: adaptive-value(350, 350);
-    left: adaptive-value(-50, -200);
+    left: adaptive-value(-50, -100);
     transform: translate(-50%, 50%);
+
+    @include desktop {
+      left: adaptive-value(-200, -100, $four-k-width, $desktop-width);
+    }
   }
 }
 .accordion {

src/scss/blocks/_footer.scss

@@ -4,11 +4,10 @@
   overflow: hidden;
 
   #footer1 {
-    width: 2021px;
-    height: 1199px;
-    bottom: adaptive-value(-330, -370);
+    width: adaptive-value(2021, 1500);
+    bottom: adaptive-value(-225, -150);
     left: 50%;
-    transform: translate(-40%, 50%);
+    transform: translate(-50%, 50%);
   }
 
   &__content {

src/scss/blocks/_prices.scss

@@ -4,8 +4,7 @@
   position: relative;
 
   #prices1 {
-    width: 1848px;
-    height: 1412px;
+    width: 1621px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

src/scss/blocks/_topics.scss

@@ -4,11 +4,14 @@
   position: relative;
 
   #topics1 {
-    width: 1091px;
-    height: 843px;
-    bottom: adaptive-value(300, 300);
-    right: adaptive-value(-50, -150);
+    width: adaptive-value(1091, 1000);
+    bottom: adaptive-value(320, 300);
+    right: adaptive-value(-50, -100);
     transform: translate(50%, 50%);
+
+    @include desktop {
+      right: adaptive-value(-275, -150, $four-k-width, $desktop-width);
+    }
   }
 
   &__list {