changes

src/blocks/page-footer/page-footer.scss

@@ -55,12 +55,12 @@
 
   &__f-s-first {
     .simple-menu {
-      @media (min-width: $screen-xl) {
+      @media (min-width: $screen-md) {
         justify-content: space-between;
         column-gap: 15px;
       }
 
-      @media (max-width: ($screen-xl - 1)) {
+      @media (max-width: ($screen-md - 1)) {
         flex-direction: column;
         align-items: center;
         gap: 2px;
@@ -92,7 +92,7 @@
       }
 
       @media (max-width: ($screen-xl - 1)) {
-        gap: 5px;
+        gap: 5px 20px;
         justify-content: center;
       }
     }
@@ -123,11 +123,14 @@
     color: #fff;
 
     @media (min-width: $screen-xl) {
-      justify-content: space-between;
       font-size: 14px;
     }
 
-    @media (max-width: ($screen-xl - 1)) {
+    @media (min-width: $screen-md) {
+      justify-content: space-between;
+    }
+
+    @media (max-width: ($screen-md - 1)) {
       flex-direction: column;
       align-items: center;
     }
@@ -137,7 +140,7 @@
         column-gap: 33px;
       }
 
-      @media (max-width: ($screen-xl - 1)) {
+      @media (max-width: ($screen-md - 1)) {
         margin-top: 5px;
         flex-direction: column;
         align-items: center;

src/blocks/page-header/page-header.scss

@@ -131,7 +131,7 @@
   position: fixed;
   left: 0;
   top: 0;
-  z-index: 13;
+  z-index: 200;
   width: 100%;
   height: 100vh;
   overflow-y: auto;

src/blocks/page/page.scss

@@ -110,6 +110,10 @@
   @media (min-width: $screen-xl) {
     --container-width: calc(1080px + 15px * 2);
   }
+
+  @media (min-width: $screen-md) {
+    --container-width: calc(738px + 15px * 2);
+  }
 }
 
 .container {
@@ -636,14 +640,15 @@ pre {
     top: 50%;
     transform: translateY(-50%);
     padding: 0;
-    width: 42px;
+    border: 1px solid transparent;
+    width: 40px;
     height: calc(100% - 10px);
-    border: none;
     background-color: var(--m-color-1);
     font-size: 0;
     line-height: 0;
     cursor: pointer;
     border-radius: $border-radius;
+    transition: background-color $transition-time, border-color $transition-time;
 
     @media (min-width: $screen-xl) {
       width: 51px;
@@ -651,7 +656,13 @@ pre {
 
     &:focus,
     &:hover {
+      background-color: #fff;
+      border-color: var(--m-color-1);
+
       svg {
+        path {
+          stroke: var(--m-color-1);
+        }
       }
     }
 
@@ -662,6 +673,10 @@ pre {
         width: auto;
         height: 20px;
       }
+
+      path {
+        transition: stroke $transition-time;
+      }
     }
   }
 }
@@ -742,6 +757,10 @@ pre {
     margin-top: 60px;
     margin-bottom: 60px;
     padding-bottom: 190px;
+  }
+
+  @media (min-width: $screen-md) {
+    padding-bottom: 118px;
     background: url(../img/top-banner.jpg) center bottom/1920px auto no-repeat;
   }
 
@@ -799,9 +818,14 @@ pre {
     }
 
     @media (min-width: $screen-xl) {
+      max-width: inherit;
       font-size: 15px;
     }
 
+    @media (min-width: $screen-md) {
+      max-width: 260px;
+    }
+
     p {
       margin-bottom: 0;
     }
@@ -864,11 +888,11 @@ pre {
   }
 
   &__second {
-    :first-child {
+    > :first-child {
       margin-top: 0;
     }
 
-    :last-child {
+    > :last-child {
       margin-bottom: 0;
     }
   }
@@ -903,8 +927,9 @@ pre {
     }
 
     @media (min-width: $screen-xl) {
-      padding: 5px 10px 10px 10px;
+      padding: 0 10px 8px 10px;
       border-radius: 10px;
+      line-height: 46px;
     }
   }
 
@@ -918,6 +943,14 @@ pre {
     @media (min-width: $screen-xl) {
       font-size: 27px;
     }
+
+    span {
+      padding-bottom: 2px;
+
+      @media (min-width: $screen-xl) {
+        padding-bottom: 3px;
+      }
+    }
   }
 }
 
@@ -928,7 +961,6 @@ pre {
 
   display: flex;
   flex-wrap: wrap;
-  gap: 20px;
 
   &__link {
     display: flex;
@@ -943,14 +975,23 @@ pre {
     color: var(--m-color-2);
     text-decoration: none;
 
-    @media (min-width: $screen-xxl) {
-    }
-
     @media (min-width: $screen-xl) {
       padding: 37px 30px;
+    }
+
+    @media (min-width: $screen-md) {
       width: calc(100% / 2 - (20px * 1 / 2));
     }
 
+    & + & {
+      margin-top: 20px;
+
+      @media (min-width: $screen-md) {
+        margin-top: 0;
+        margin-left: 20px;
+      }
+    }
+
     .btn {
     }
 
@@ -1004,7 +1045,7 @@ pre {
       padding: 42px 60px;
     }
 
-    @media (min-width: $screen-xl) {
+    @media (min-width: $screen-md) {
       padding: 40px;
       background-image: url(../img/a-bg-1.svg);
     }
@@ -1034,10 +1075,13 @@ pre {
     }
 
     @media (min-width: $screen-xl) {
-      max-width: 488px;
       font-size: 15px;
     }
 
+    @media (min-width: $screen-md) {
+      max-width: 488px;
+    }
+
     p {
       margin-bottom: 0;
     }
@@ -1066,7 +1110,7 @@ pre {
 
   display: flex;
   flex-wrap: wrap;
-  gap: 20px;
+  margin: -10px -10px 0;
 
   &__item {
     display: flex;
@@ -1081,13 +1125,20 @@ pre {
     color: var(--m-color-4);
     line-height: 120%;
     font-family: $font-family;
+    margin: 10px;
+    transition: box-shadow $transition-time;
 
     @media (min-width: $screen-xl) {
-      width: calc(100% / 4 - (20px * 3 / 4));
+      width: calc(100% / 4 - (28px * 3 / 4));
+    }
+
+    @media (min-width: $screen-md) {
+      width: calc(100% / 2 - (42px * 1 / 2));
     }
 
     &:focus,
     &:hover {
+      box-shadow: 0 0 4px rgba(2, 48, 122, 0.1);
       color: var(--m-color-4);
 
       #{$block-name}__i-title {
@@ -1263,6 +1314,10 @@ pre {
     @media (min-width: $screen-xl) {
       width: calc(100% / 4 - (20px * 3 / 4));
     }
+
+    @media (min-width: $screen-md) {
+      width: calc(100% / 3 - (20px * 2 / 3));
+    }
   }
 
   &__i-title {
@@ -1323,7 +1378,7 @@ pre {
     #{$block-name}__item {
       width: 100% !important;
 
-      @media (min-width: $screen-xl) {
+      @media (min-width: $screen-md) {
         width: calc(100% / 3 - (25px * 2 / 3)) !important;
       }
     }
@@ -1445,19 +1500,20 @@ pre {
   background-color: var(--m-color-1);
   color: #fff;
 
-  @media (min-width: $screen-xxl) {
+  @media (min-width: $screen-xl) {
+    padding: 30px 40px;
   }
 
-  @media (min-width: $screen-xl) {
+  @media (min-width: $screen-md) {
     display: flex;
     align-items: center;
-    padding: 30px 40px;
+    padding: 30px;
   }
 
   &__ico {
     line-height: 0;
 
-    @media (max-width: ($screen-xl - 1)) {
+    @media (max-width: ($screen-md - 1)) {
       text-align: center;
     }
 
@@ -1465,10 +1521,7 @@ pre {
       width: auto;
       height: 40px;
 
-      @media (min-width: $screen-xxl) {
-      }
-
-      @media (min-width: $screen-xl) {
+      @media (min-width: $screen-md) {
         height: 60px;
       }
     }
@@ -1483,10 +1536,14 @@ pre {
 
     @media (min-width: $screen-xl) {
       padding-left: 40px;
+    }
+
+    @media (min-width: $screen-md) {
+      padding-left: 30px;
       font-size: 15px;
     }
 
-    @media (max-width: ($screen-xl - 1)) {
+    @media (max-width: ($screen-md - 1)) {
       margin-top: 20px;
     }
 
@@ -1789,18 +1846,6 @@ pre {
   &__right {
     margin-left: 12px;
   }
-
-  &__name {
-  }
-
-  &__name {
-  }
-
-  &__name {
-  }
-
-  &__name {
-  }
 }
 
 /* ----- .v-menu ----- */
@@ -1832,7 +1877,8 @@ pre {
   > .v-menu__l-item.active
   > .v-menu__l-item-block
   .v-menu__l-item-link {
-  font-weight: 700;
+  text-shadow: 0 0 1px #02307a;
+  // font-weight: 700;
 }
 
 .v-menu__list--level-3 > .v-menu__l-item.active > .v-menu__l-item-link,
@@ -1855,11 +1901,12 @@ pre {
   display: block;
   text-decoration: none;
   color: #1f1f28;
-  transition: color 0.35s;
+  transition: color 0.35s, text-shadow 0.35s;
 }
 
 .v-menu__l-item-link:hover,
 .v-menu__l-item-link:focus {
+  text-shadow: 0 0 1px #02307a;
   color: #02307a;
 }
 
@@ -2014,6 +2061,10 @@ pre {
   background-color: transparent;
   color: var(--m-color-4);
   font-size: 14px;
+
+  @media (max-width: ($screen-lg - 1)) {
+    font-size: 16px;
+  }
 }
 
 .v-menu--type-1
@@ -2031,15 +2082,10 @@ pre {
 
 .v-menu--type-1 .v-menu__l-item-link {
   font-size: 13px;
-}
 
-.v-menu--type-1 .v-menu__list--level-2 > .v-menu__l-item > .v-menu__l-item-link,
-.v-menu--type-1
-  .v-menu__list--level-2
-  > .v-menu__l-item
-  > .v-menu__l-item-block
-  .v-menu__l-item-link {
-  font-weight: 600;
+  @media (max-width: ($screen-lg - 1)) {
+    font-size: 15px;
+  }
 }
 
 .v-menu--type-1 .v-menu__list--level-4 > .v-menu__l-item > .v-menu__l-item-link,
@@ -2049,6 +2095,10 @@ pre {
   > .v-menu__l-item-block
   .v-menu__l-item-link {
   font-size: 12px;
+
+  @media (max-width: ($screen-lg - 1)) {
+    font-size: 13px;
+  }
 }
 
 .v-menu--type-1 .v-menu__list--level-2 .v-menu__l-item + .v-menu__l-item {
@@ -2057,6 +2107,10 @@ pre {
 
 .v-menu--type-1 .v-menu__list--level-3 .v-menu__l-item + .v-menu__l-item {
   margin-top: 6px;
+
+  @media (max-width: ($screen-lg - 1)) {
+    margin-top: 8px;
+  }
 }
 
 .v-menu--type-1 .v-menu__l-item-menu-wrapper > .v-menu__list {
@@ -2122,3 +2176,10 @@ pre {
 .v-menu--type-1 .v-menu__list--level-1 > .v-menu__l-item + .v-menu__l-item {
   margin-top: 20px;
 }
+
+.breadcrumb {
+  @media (max-width: ($screen-md - 1)) {
+    margin-top: 0 !important;
+    opacity: 0;
+  }
+}

src/blocks/pagination/pagination.scss

@@ -20,15 +20,17 @@
     color: $text-color;
     font-size: 14px;
 
-    @media (min-width: $screen-xxl) {
-    }
-
     @media (min-width: $screen-xl) {
       padding: 10px 18px;
-      min-width: 45px;
       font-size: 16px;
     }
 
+    @media (min-width: $screen-md) {
+      padding: 10px;
+      min-width: 45px;
+      font-size: 14px;
+    }
+
     &:hover,
     &:focus {
       text-decoration: none;

src/blocks/tabs/tabs.scss

@@ -10,7 +10,6 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    gap: 5px;
     margin: 0 0 27px;
     padding: 0;
     list-style: none;
@@ -20,7 +19,6 @@
     }
 
     @media (min-width: $screen-xl) {
-      gap: 10px 15px;
       margin-bottom: 30px;
     }
 
@@ -32,6 +30,21 @@
   &__link-wrap {
     position: relative;
 
+    &:hover {
+      #{$block-name}__link {
+        background-color: var(--m-color-1);
+        color: #fff;
+      }
+    }
+
+    & + & {
+      margin-left: 5px;
+
+      @media (min-width: $screen-xl) {
+        margin-left: 15px;
+      }
+    }
+
     &--active {
       #{$block-name}__link {
         background-color: var(--m-color-1);
@@ -63,6 +76,10 @@
 
     @media (min-width: $screen-xl) {
       padding: 20px 25px;
+    }
+
+    @media (min-width: $screen-md) {
+      padding: 15px 20px;
       font-size: 14px;
     }