Set up banner.

resources/assets/styles/layouts/_pages.scss

@@ -5,7 +5,7 @@
     align-items: center;
     padding: 0 0.78125rem;
     display: flex;
-    height: 445px;
+    height: rem(445);
     background-color: $white;
     margin-left: auto;
     margin-right: auto;
@@ -64,13 +64,27 @@
   .blocks.blocks-2 .widget_text:nth-child(2),
   .blocks.blocks-3 .widget_text:nth-child(2),
   .blocks.blocks-4 .widget_text:nth-child(3) {
+    background: transparent;
+    margin-bottom: rem(400);
+
     &::after {
+      z-index: -1;
       content: "";
       display: block;
       width: 100vw;
       height: rem(444);
-      background: green;
+      background-image: url('../images/banner.jpg');
+      background-position: center;
+      background-size: cover;
       position: absolute;
+      top: rem(1410);
+      left: 0;
+    }
+  }
+
+  .blocks.blocks-4 .widget_text:nth-child(3) {
+    &::after {
+      top: rem(1880);
     }
   }
 
@@ -166,12 +180,13 @@
 @media (min-width: $medium) {
   .home {
     .wrap {
-      margin-top: -366px;
+      margin-top: rem(-366);
     }
 
     .block {
-      width: 775px;
+      width: rem(775);
-      margin-bottom: 119px;
+      height: rem(494);
+      margin-bottom: rem(119);
       padding: 0 90px;
       box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
 
@@ -201,6 +216,23 @@
       margin-right: auto;
     }
 
+    .blocks.blocks-2 .widget_text:nth-child(2),
+    .blocks.blocks-3 .widget_text:nth-child(2),
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      margin-bottom: rem(119);
+
+      &::after {
+        height: rem(600);
+        top: rem(1547);
+      }
+    }
+
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      &::after {
+        top: rem(2177);
+      }
+    }
+
     .latest-books {
       width: 100%;
       margin-left: auto;
@@ -257,8 +289,7 @@
 @media (min-width: $large) {
   .home {
     .block {
-      width: 1115px;
+      width: rem(1115);
-      height: 494px;
     }
 
     .latest-books {
@@ -311,5 +342,11 @@
         margin-right: 65px;
       }
     }
+
+    .blocks.blocks-4 .widget_text:nth-child(3) {
+      &::after {
+        top: rem(1596);
+      }
+    }
   }
 }

resources/assets/styles/main.scss

@@ -9,7 +9,6 @@
  * Prefix your imports with `~` to grab from node_modules/
  * @see https://github.com/webpack-contrib/sass-loader#imports
  */
-@import "~slick-carousel/slick/slick";
 
 /** Import theme styles */
 @import "common/functions";