поченил slider phone => pc

assets/css/gp-style-core.css

@@ -204,6 +204,7 @@ body{
     background-color: rgba(17, 17, 20, 0);
 
     cursor: pointer;
+    border: none;
 }
 .btn-big--border{
     padding: 21px 32px;

assets/css/gp-style-desktop.css

@@ -26,6 +26,11 @@
 .text-3{
     font-size: 16px;
 }
+@media only screen and (min-width: 992px) and (max-width: 1500px) {
+.wrapper{
+    max-width: 100%;
+}
+}
 /* text */
 
 /* header */
@@ -455,7 +460,7 @@
 
 @media only screen and (min-width: 992px) {
 .gym__item{
-    width: calc(50% - 40px) !important;
+    width: calc(50% - 44px) !important;
 }
 .gym .swiper-slide:nth-child(3){
     width: 100% !important;
@@ -473,7 +478,7 @@
 .projects__item{
     margin: 20px;
 
-    width: calc(50% - 40px) !important;
+    width: calc(50% - 44px) !important;
 
     display: flex;
     flex-direction: column;
@@ -954,7 +959,9 @@
 
 /* modal */
 .modal__item{
-    width: 1000px;;
+    width: 1000px;
+
+    position: relative;
 }
 .modal__item > .title-1{
     text-align: center;
@@ -965,5 +972,22 @@
 .modal__item > .form{
     padding: 56px 36px 0 36px;
 }
+.modal-item__close{
+    position: absolute;
+    top: 40px;
+    right: 40px;
+
+    width: 24px;
+    aspect-ratio: 1;
+
+    background-image: url(/assets/img/icon/close.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+
+    background-color: rgba(42, 42, 45, 0);
+    border: none;
+
+    cursor: pointer;
+}
 /* modal */
 @media only screen and (min-width: 992px) and (max-width: 1032px) {}

assets/css/gp-style-tablet.css

@@ -751,5 +751,17 @@ main{
 }
 /* call */
 
+/* modal */
+.modal__item{
+    padding: 64px 16px;
+}
+.modal__item > .form{
+    padding: 40px 0 0 0;
+}
+.modal-item__close{
+    top: 20px;
+    right: 20px;
+}
+/* modal */
 
 @media only screen and (max-width: 992px) {}

assets/js/main.js

@@ -216,6 +216,41 @@ btnOpenSearchPhone.onclick = function () {
 
 // search end
 
+// open-modal
+
+let openModals = document.querySelectorAll('.open-modal'),
+    modal = document.querySelector('.modal');
+
+openModals.forEach(openModal => {
+    let modalName = openModal.dataset.modal;
+
+    openModal.onclick = function () {
+        let modalItem = document.querySelector(`.modal__item.${modalName}`);
+
+        modalItem.classList.add('active');
+        modal.classList.add('active');
+    }
+})
+
+modal.onclick = function (event) {
+    if (event.srcElement.classList.contains('modal')) {
+        document.querySelector(`.modal__item.active`).classList.remove('active');
+        modal.classList.remove('active');
+    }
+}
+
+let itemModels = document.querySelectorAll('.modal__item');
+
+itemModels.forEach(item => {
+    let btnClose = item.querySelector('.modal-item__close');
+
+    btnClose.onclick = function () {
+        item.classList.remove('active');
+        modal.classList.remove('active');
+    }
+})
+// open-modal end
+
 // resize
 window.addEventListener('resize', () => {
     let screenWidth = window.screen.width;

index.html

@@ -76,17 +76,17 @@
                         </a>
                     </div>
                     <div class="header-main__item">
-                        <button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn">
+                        <button href="" class="btn-big btn-big--border btn-big--border--blood header-main__btn open-modal" data-modal="modal-call">
                             Заказать звонок
                         </button>
-                        <a href="" class="btn-big btn-big--blood header-main__btn">
+                        <button href="" class="btn-big btn-big--blood header-main__btn open-modal" data-modal="modal-project">
                             спецификация
-                        </a>
+                        </button>
                     </div>
                 </div>
 
                 <div class="header__phone">
-                    <div class="header-phone__item">
+                    <div class="header-phone__item open-modal" data-modal="modal-call">
                         <img src="/assets/img/icon/device-phone.svg" alt="phone">
                     </div>
     
@@ -329,7 +329,7 @@
                             Увеличиваем посещаемость клубов на 18% за счет оптимального зонирования и подбора оборудования
                         </p>
 
-                        <a href="" class="btn-big btn-big--blood">
+                        <a class="btn-big btn-big--blood open-modal" data-modal="modal-call">
                             Получить бесплатную консультацию
                         </a>
                     </div>
@@ -1093,6 +1093,8 @@
 
         <div class="modal">
             <div class="modal__item modal-project">
+                <button class="modal-item__close"></button>
+
                 <p class="title-1">
                     Получи проект бесплатно
                 </p>
@@ -1147,6 +1149,8 @@
             </div>
 
             <div class="modal__item modal-call">
+                <button class="modal-item__close"></button>
+
                 <p class="title-1">
                     Обратный звонок
                 </p>