bicycle shop tablet/pc/phone

src/styles/blocks/button.scss

@@ -1,16 +1,40 @@
 .button {
-  border-radius: 40px;
-  background: #fff;
   display: block;
-  text-decoration: none;
-  color: #1d1d1d;
+  margin: 0 auto;
+  box-sizing: border-box;
+  width: 100%;
   height: 56px;
-  line-height: 56px;
-
-  text-align: center;
-  font-family: "Poppins", sans-serif;
-  font-size: 16px;
-  font-style: normal;
+  background-color: #fff;
+  border-radius: 40px;
+  padding: 14px;
+  color: $menu-color;
   font-weight: 700;
+  font-size: 16px;
+  line-height: 27px;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+
+  transition: transform $effectDuration;
+
+  @include onTablet {
+    width: 392px;
+  }
+
+  @include onDesktop {
+    width: 324px;
+  }
+
+  &:active {
+    box-shadow: 1px 4px 16px rgba(232, 232, 240, 0.64);
+  }
+}
+
+.button--resize {
+  margin-bottom: 48px;
 
+  @include onTablet {
+    width: 100%;
+    margin-bottom: 0;
+  }
 }

src/styles/blocks/categories.scss

@@ -0,0 +1,62 @@
+.categories {
+  &__wrapper {
+    display: grid;
+    row-gap: 40px;
+
+    @include onTablet {
+      row-gap: 48px;
+    }
+  }
+}
+
+.category {
+  &__photos {
+    @include pageGrid;
+    margin-bottom: 16px;
+  }
+  &__link {
+    position: relative;
+    &--wide {
+      @include onTablet {
+        grid-column: span 4;
+      }
+      @include onDesktop {
+        grid-column: span 8;
+      }
+    }
+    &--square {
+      height: 0;
+      padding-bottom: 100%;
+
+      @include onTablet {
+        grid-column: span 2;
+      }
+      @include onDesktop {
+        grid-column: span 4;
+      }
+    }
+  }
+
+  &__photo {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    transition: transform $effectDuration;
+
+    @include hover(transform, scale(1.05));
+  }
+
+  &__description {
+    text-align: start;
+    margin: 8px 0 0;
+  }
+
+  &__title {
+    margin: 0;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+  }
+}

src/styles/blocks/contact-form.scss

@@ -0,0 +1,75 @@
+.grid-container {
+  @include pageGrid;
+  --columns: 1;
+}
+
+.contact-us {
+  &__block {
+    @include onTablet {
+      grid-column: span 3;
+    }
+
+    @include onDesktop {
+      grid-column: span 5;
+    }
+  }
+
+  &__form-field {
+    box-sizing: border-box;
+    width: 100%;
+    height: 48px;
+    padding: 14px;
+    margin-bottom: 16px;
+    border-radius: 40px;
+    border: none;
+    resize: none;
+    background-color: #f8f8fa;
+
+    &::placeholder {
+      color: #7e7e83;
+      font-family: "Poppins", sans-serif;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+
+    &:hover::placeholder {
+      color: #292929;
+    }
+
+    &--message {
+      height: 100%;
+      border-radius: 16px;
+      margin-bottom: 32px;
+    }
+  }
+
+  &__info {
+    @include onTablet {
+      grid-column: span 2;
+    }
+
+    @include onDesktop {
+      grid-column: 8 / 10;
+    }
+
+    &-section {
+      margin-bottom: 24px;
+    }
+
+    &-title {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      margin: 8px 0;
+    }
+
+    &-link {
+      font-size: 16px;
+      font-weight: 500;
+      text-decoration: none;
+      color: #fff;
+    }
+  }
+}

src/styles/blocks/container.scss

@@ -0,0 +1,13 @@
+.container {
+  padding-inline: 20px;
+
+  @include onTablet {
+    padding-inline: 72px;
+  }
+
+  @include onDesktop {
+    max-width: 1260px;
+    margin-inline: auto;
+    padding-inline: 120px;
+  }
+}

src/styles/blocks/footer.scss

@@ -1,10 +1,10 @@
 .footer {
-  height: 200px;
   background-image: url(/images/photos/footer-background.jpg);
-  display: flex;
-  flex-direction: column;
-  background-repeat: no-repeat;
   background-size: cover;
+  background-position: 65%;
+  height: 100vh;
 
-  margin-top: 120px;
+  @include onTablet {
+    background-position: center;
+  }
 }

src/styles/blocks/header.scss

@@ -2,8 +2,10 @@
   background-image: url(/images/photos/header-background.jpg);
   background-size: cover;
   background-position: 90%;
-  padding-left: 20px;
-  padding-right: 20px;
+
+  @include onTablet {
+    background-position: center;
+  }
 
   &__content {
     height: 100vh;
@@ -16,18 +18,23 @@
 
   &__title {
     margin: 0;
-    color: #fff;
     text-align: center;
-    font-family: "Poppins", sans-serif;
     font-size: 36px;
     font-style: normal;
     font-weight: 700;
-    line-height: 100%; /* 36px */
+    line-height: 100%;
     letter-spacing: -1.5px;
+
+    @include onTablet {
+      font-size: 64px;
+    }
   }
 
   &__bottom {
     padding-bottom: 80px;
   }
 
+  @include onTablet {
+    padding-bottom: 130px;
+  }
 }

src/styles/blocks/icon.scss

@@ -5,21 +5,58 @@
   background-position: center;
   background-size: cover;
 
+  @include hover(transform, scale(1.2));
+
+  @include onTablet {
+    height: 32px;
+    width: 32px;
+  }
+
+  &__tooltip {
+    display: none;
+
+    @include onDesktop {
+      position: absolute;
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+
+      display: block;
+      width: max-content;
+      padding-right: 12px;
+
+      color: #fff;
+      font-weight: 700;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      opacity: 0;
+
+      pointer-events: none;
+      transition: transform $effectDuration;
+    }
+  }
+
+  &:hover &__tooltip {
+    opacity: 1;
+    pointer-events: all;
+  }
+
   &--phone {
     background-image: url(/images/phone.svg);
   }
 
   &--menu {
-    background-image: url(/images/cross.svg);
+    background-image: url(/images/menu.svg);
 
+    &:hover {
+      background-image: url(/images/menu_hover.svg);
+
+    }
   }
 
   &--close {
     background-image: url(/images/close-black.svg);
-
-  }
-
-  &__tooltip {
-    display: none;
   }
 }