сделал js для открытия меню

assets/css/gp-style-core.css

@@ -68,6 +68,38 @@ body{
     font-family: var(--font-family);
 }
 
+.modal{
+    position: fixed;
+    top: 0;
+
+    height: 100vh;
+    width: 100%;
+
+    background-color: rgba(17, 17, 20, .8);
+
+    z-index: 100;
+
+    display: none;
+}
+.modal.active{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal__item{
+    padding: 88px 64px;
+
+    background-color: var(--background-main);
+
+    position: relative;
+
+    display: none;
+}
+.modal__item.active{
+    display: block;
+}
+
 /* text */
 .title-1{
     font-weight: 700;

assets/css/gp-style-desktop.css

@@ -851,4 +851,19 @@
 }
 }
 /* call */
+
+/* modal */
+.modal__item{
+    width: 1000px;;
+}
+.modal__item > .title-1{
+    text-align: center;
+}
+.modal__item > .text-1{
+    margin-top: 24px;
+}
+.modal__item > .form{
+    padding: 56px 36px 0 36px;
+}
+/* modal */
 @media only screen and (min-width: 992px) and (max-width: 1032px) {}

assets/css/gp-style-tablet.css

@@ -90,39 +90,65 @@
 
     transition: opacity .3s;
 }
-.button-menu__close{
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-
-    transition: opacity .3s;
-    opacity: 0;
-}
-.button-menu.open .button-menu__open{
-    opacity: 0;
-}
-.button-menu.open .button-menu__close{
-    opacity: 1;
-}
 
 .phone-menu{
     position: absolute;
-    top: 112px;
+    top: 0px;
     right: 0;
     left: 0;
     
+    height: 0;
     width: 100%;
+
+    background-color: var(--background-main);
+
+    z-index: 10;
+    overflow: hidden;
+    transition: all .3s;
+}
+.phone-menu.active{
+    height: 100vh;
+    overflow-y: auto;
 }
 .phone-menu__block-content{
-    /* height: 0; */
-    /* overflow: hidden; */
+    height: 0;
+    overflow: hidden;
+
+    z-index: 10;
+
+    transition: all .5s;
 }
 .phone-menu__content{
-    padding: 0 16px 40px 16px;
+    padding: 104px 16px 40px 16px;
 
+    position: relative;
+}
+.phone-menu__sub{
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: 100%;
+    transition: all .3s;
+
+    background-color: var(--background-main);
+}
+.phone-menu__sub.active{
+    left: 0;
+}
+.phone-menu-content__close{
+    position: absolute;
+    top: 40px;
+    right: 16px;
+
+    width: 32px;
+    aspect-ratio: 1;
+
+    background-image: url(/assets/img/icon/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+
+    background-color: var(--background-main);
+    border: none;
 }
 .phone-menu__block{
     margin-top: 32px;
@@ -187,6 +213,10 @@
     display: flex;
     align-items: center;
 }
+
+.phone-menu{
+    display: block;
+}
 /* header */
 
 /* footer */
@@ -612,4 +642,5 @@ main{
 }
 /* call */
 
+
 @media only screen and (max-width: 992px) {}

assets/js/main.js

@@ -142,6 +142,32 @@ function howPhone() {
 }
 // how end
 
+// phone menu
+let btnOpenMenu = document.querySelector('.button-menu__open');
+
+btnOpenMenu.onclick = function () {
+    let phoneMenu = document.querySelector('.phone-menu'),
+        block = document.querySelector('.phone-menu__block-content.main'),
+        content = document.querySelector('.phone-menu__content.main'),
+        newHeigh = content.offsetHeight + 'px';
+
+    phoneMenu.classList.add('active');
+    block.style.height = newHeigh;
+}
+
+let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
+
+nextPhoneMenu.forEach(next => {
+    next.onclick = function () {
+        let subName = next.dataset.menu,
+            blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
+        
+        blockSub.classList.add('active');
+    }
+})
+// phone menu
+
+
 // resize
 window.addEventListener('resize', () => {
     let screenWidth = window.screen.width;