Update

styles/style.css

@@ -313,6 +313,8 @@ a {
       -ms-flex-pack: end;
           justify-content: flex-end;
   width: 25%;
+  -webkit-transform: translateY(60%);
+          transform: translateY(60%);
 }
 
 .point-item__num {
@@ -325,7 +327,6 @@ a {
 }
 
 .point-item-wrapper {
-  border-left: 1px rgba(255, 255, 255, 0.5) solid;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -345,12 +346,13 @@ a {
   line-height: 160%;
   color: #ffffff;
   margin: 0;
-  margin-left: 44.5px;
-  margin-bottom: 16px;
+  padding-left: 44.5px;
+  padding-bottom: 16px;
+  border-left: 1px rgba(255, 255, 255, 0.5) solid;
 }
 
 .point-item-wrapper__text {
-  display: none;
+  opacity: 0;
   font-weight: 300;
   font-size: 18px;
   line-height: 130%;
@@ -361,19 +363,22 @@ a {
 .point-item:hover {
   background: #ffffff;
   cursor: pointer;
+  -webkit-transform: translateY(0%);
+          transform: translateY(0%);
 }
 
 .point-item:hover .point-item__num,
 .point-item:hover .point-item-wrapper__title {
   color: #16291f;
+  border-width: 0;
 }
 
 .point-item:hover .point-item-wrapper__text {
-  display: block;
+  opacity: 1;
 }
 
 .point-item:hover .point-item-wrapper {
-  border-color: #e6e9f0;
+  border-left: 1px #e6e9f0 solid;
 }
 
 .production {
@@ -1832,7 +1837,7 @@ a {
   }
 }
 
-@media (max-width: 320px) {
+@media (max-width: 700px) {
   .navbar {
     padding: 16px 16px 24px;
     -webkit-box-pack: justify;
@@ -1971,6 +1976,12 @@ a {
   .production-list-link {
     margin: 0;
     margin-bottom: 8px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
   }
   .production-list-link:last-child {
     margin: 0;
@@ -2340,12 +2351,19 @@ a {
   }
   .footer-info-dev {
     margin: 0;
-    margin-right: auto;
-    margin-top: 16px;
+    margin-left: auto;
   }
   .footer-info-dev__text {
     font-size: 12px;
     margin-right: 10px;
   }
 }
+
+@media (max-width: 430px) {
+  .footer-info-dev {
+    margin: 0;
+    margin-top: 16px;
+    margin-right: auto;
+  }
+}
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file

styles/style.scss

@@ -225,6 +225,7 @@ a {
     flex-direction: column;
     justify-content: flex-end;
     width: 25%;
+    transform: translateY(60%);
     &__num {
       font-weight: 300;
       font-size: 30px;
@@ -234,7 +235,6 @@ a {
       margin-left: -7px;
     }
     &-wrapper {
-      border-left: 1px rgba($color: #fff, $alpha: 0.5) solid;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
@@ -245,11 +245,12 @@ a {
         line-height: 160%;
         color: #ffffff;
         margin: 0;
-        margin-left: 44.5px;
-        margin-bottom: 16px;
+        padding-left: 44.5px;
+        padding-bottom: 16px;
+        border-left: 1px rgba($color: #fff, $alpha: 0.5) solid;
       }
       &__text {
-        display: none;
+        opacity: 0;
         font-weight: 300;
         font-size: 18px;
         line-height: 130%;
@@ -261,16 +262,18 @@ a {
   &-item:hover {
     background: #ffffff;
     cursor: pointer;
+    transform: translateY(0%);
   }
   &-item:hover &-item__num,
   &-item:hover &-item-wrapper__title {
     color: #16291f;
+    border-width: 0;
   }
   &-item:hover &-item-wrapper__text {
-    display: block;
+    opacity: 1;
   }
   &-item:hover &-item-wrapper {
-    border-color: #e6e9f0;
+    border-left: 1px #e6e9f0 solid;
   }
 }
 
@@ -1446,7 +1449,7 @@ a {
   }
 }
 
-@media (max-width: 320px) {
+@media (max-width: 700px) {
   .navbar {
     padding: 16px 16px 24px;
     justify-content: space-between;
@@ -1553,6 +1556,8 @@ a {
       &-link {
         margin: 0;
         margin-bottom: 8px;
+        display: flex;
+        justify-content: center;
       }
       &-link:last-child {
         margin: 0;
@@ -1897,8 +1902,7 @@ a {
       }
       &-dev {
         margin: 0;
-        margin-right: auto;
-        margin-top: 16px;
+        margin-left: auto;
         &__text {
           font-size: 12px;
           margin-right: 10px;
@@ -1907,3 +1911,15 @@ a {
     }
   }
 }
+
+@media (max-width: 430px) {
+  .footer {
+    &-info {
+      &-dev {
+        margin: 0;
+        margin-top: 16px;
+        margin-right: auto;
+      }
+    }
+  }
+}