Merge pull request #121 from apuc/tracker-tasks

Tracker tasks

src/components/AuthBlock/authBlock.scss

@@ -7,18 +7,20 @@
     display: flex;
     position: relative;
 
-    @media (max-width: 1024px) {
+    @media (max-width: 1000px) {
-      margin-top: 100px;
-    }
-
-    @media (max-width: 870px) {
       flex-direction: column;
       padding: 25px;
+      margin-top: 0;
+      padding: 0;
     }
   }
 
   &__info {
     margin-right: 115px;
+
+    @media (max-width: 1000px) {
+      order: 3;
+    }
     h3 {
       font-weight: 500;
       font-size: 30px;
@@ -33,14 +35,21 @@
       font-size: 16px;
       line-height: 30px;
 
-      @media (max-width: 870px) {
+      @media (max-width: 1000px) {
         max-width: none;
-        margin-bottom: 15px;
+        margin: 15px 25px;
+      }
+
+      @media (max-width: 600px) {
+        font-size: 14px;
+        line-height: 22px;
       }
     }
 
-    @media (max-width: 870px) {
+    @media (max-width: 1000px) {
       margin-right: 0;
+      display: flex;
+      align-items: center;
     }
   }
 
@@ -61,8 +70,8 @@
       font-size: 15px;
       line-height: 18px;
 
-      @media (max-width: 870px) {
+      @media (max-width: 1000px) {
-        max-width: 350px;
+        max-width: 550px;
       }
     }
 
@@ -99,11 +108,25 @@
         font-weight: 500;
       }
     }
+
+    @media (max-width: 1000px) {
+      order: 2;
+      margin-bottom: 55px;
+    }
   }
 
   &__img {
     position: absolute;
     right: 48px;
     top: -90px;
+
+    @media (max-width: 1000px) {
+      order: 1;
+      position: inherit;
+      right: inherit;
+      top: inherit;
+      max-width: 115px;
+      margin-bottom: 35px;
+    }
   }
 }

src/components/Common/ModalLayout/modalLayout.scss

@@ -70,6 +70,10 @@
       padding: 39px 10px 29px 10px;
     }
   }
+
+  .ck-editor {
+    width: 100%;
+  }
 }
 
 .modal-layout.active {

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -720,7 +720,7 @@
         }
         span {
           font-size: 12px;
-          color: #1458DD;
+          color: #343a40;
           margin-left: 10px;
           font-weight: 500;
         }

src/components/ProjectTiket/projectTiket.scss

@@ -21,10 +21,6 @@
     width: 100%;
   }
 
-  @media (max-width: 430px) {
-    padding: 8px 13px 8px;
-  }
-
   a {
     font-weight: 700;
     font-size: 18px;
@@ -47,10 +43,6 @@
     align-items: center;
     position: relative;
 
-    @media (max-width: 430px) {
-      justify-content: space-between;
-    }
-
     p {
       color: #6f6f6f;
       font-weight: 500;
@@ -90,10 +82,6 @@
       color: #6f6f6f;
       right: 0;
       top: -35%;
-
-      @media (max-width: 430px) {
-        display: none;
-      }
     }
   }
 }

src/components/TrackerSelectColumn/TrackerSelectColumn.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+
+import { moveProjectTask } from "@redux/projectsTrackerSlice";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+
+import "./trackerSelectColumn.scss";
+
+export const TrackerSelectColumn = ({ columns, task, currentColumn }) => {
+  const dispatch = useDispatch();
+  const [openSelect, setOpenSelect] = useState(false);
+  return (
+    <div
+      className="trackerSelectColumn"
+      onClick={() => setOpenSelect(!openSelect)}
+    >
+      <p>Выберите колонку</p>
+      <img className={openSelect ? "open" : ""} src={arrowDown} alt="arrow" />
+      {openSelect && (
+        <div className="trackerSelectColumn__dropDown">
+          {columns.map((column) => {
+            return (
+              <p
+                key={column.id}
+                onClick={() => {
+                  dispatch(
+                    moveProjectTask({
+                      startWrapperIndex: { index: currentColumn, task },
+                      columnId: column.id,
+                    })
+                  );
+                }}
+              >
+                {column.title}
+              </p>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TrackerSelectColumn;

src/components/TrackerSelectColumn/trackerSelectColumn.scss

@@ -0,0 +1,51 @@
+.trackerSelectColumn {
+  display: none;
+
+  @media (max-width: 900px) {
+    display: flex;
+    width: 100%;
+    margin: 10px 0;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2px 6px;
+    cursor: pointer;
+    border: 1px solid #e3e2e2;;
+    border-radius: 8px;
+    position: relative;
+
+    p {
+      color: #252c32;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+    }
+
+    img {
+      transition: all 0.3s ease;
+    }
+
+    .open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__dropDown {
+    position: absolute;
+    top: -110px;
+    background: white;
+    border-radius: 8px;
+    padding: 10px 10px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    width: 100%;
+    z-index: 100;
+    border: 1px solid #c7c7c7;
+    left: 0;
+
+    p {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+}

src/pages/ProjectTracker/ProjectTracker.js

@@ -35,6 +35,7 @@ import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
+import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
@@ -193,6 +194,9 @@ export const ProjectTracker = () => {
   }
 
   function openTicket(e, task) {
+    if (window.innerWidth < 900) {
+      return;
+    }
     setSelectedTicket(task);
     setModalActiveTicket(true);
   }
@@ -298,7 +302,7 @@ export const ProjectTracker = () => {
         <div className="tracker__tabs__head">
           <Link
             to="/profile/tracker"
-            className="tab active-tab tab"
+            className="tab active-tab tab projectsTab"
             onClick={() => dispatch(setToggleTab(1))}
           >
             <img src={project} alt="img" />
@@ -306,7 +310,7 @@ export const ProjectTracker = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab"
+            className="tab tasksTab"
             onClick={() => dispatch(setToggleTab(2))}
           >
             <img src={tasks} alt="img" />
@@ -314,7 +318,7 @@ export const ProjectTracker = () => {
           </Link>
           <Link
             to="/profile/tracker"
-            className="tab"
+            className="tab archiveTab"
             onClick={() => dispatch(setToggleTab(3))}
           >
             <img src={archive} alt="img" />
@@ -682,6 +686,13 @@ export const ProjectTracker = () => {
                                   </span>
                                 </div>
                               </div>
+                              <TrackerSelectColumn
+                                columns={projectBoard.columns.filter(
+                                  (item) => item.id !== column.id
+                                )}
+                                currentColumn={column.id}
+                                task={task}
+                              />
                             </div>
                           );
                         })}

src/pages/Tracker/Tracker.js

@@ -44,6 +44,7 @@ export const Tracker = () => {
   const [allCompletedTasks, setAllCompletedTasks] = useState([]);
 
   const [modalCreateProject, setModalCreateProject] = useState(false);
+  const tabs = ["projectsTab", "tasksTab", "archiveTab"];
 
   useEffect(() => {
     setLoader(true);
@@ -135,28 +136,32 @@ export const Tracker = () => {
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <div
-            className={tab === 1 ? "tab active-tab" : "tab"}
+            className={
+              tab === 1 ? "tab active-tab projectsTab" : "tab projectsTab"
+            }
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
             <p>Проекты </p>
           </div>
           <div
-            className={tab === 2 ? "tab active-tab" : "tab"}
+            className={tab === 2 ? "tab active-tab tasksTab" : "tab tasksTab"}
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
             <p>Все мои задачи</p>
           </div>
           <div
-            className={tab === 3 ? "tab active-tab" : "tab"}
+            className={
+              tab === 3 ? "tab active-tab archiveTab" : "tab archiveTab"
+            }
             onClick={() => toggleTabs(3)}
           >
             <img src={archive} alt="img" />
             <p>Архив</p>
           </div>
         </div>
-        <div className="tracker__tabs__content">
+        <div className={`tracker__tabs__content ${tabs[tab - 1]}`}>
           <div
             className={
               tab === 1

src/pages/Tracker/tracker.scss

@@ -46,6 +46,15 @@
       margin: 0 auto;
       position: relative;
       height: 60px;
+
+      @media (max-width: 650px) {
+        padding: 0 15px;
+        background: none;
+        justify-content: space-between;
+        position: relative;
+        top: 15px;
+        height: auto;
+      }
     }
 
     .tab {
@@ -79,6 +88,19 @@
           white-space: nowrap;
         }
       }
+
+      @media (max-width: 650px) {
+        border-radius: 10px;
+        flex-direction: column;
+        padding: 20px;
+        align-items: start;
+        row-gap: 20px;
+        height: auto !important;
+
+        p {
+          margin-left: 0;
+        }
+      }
     }
 
     .active-tab {
@@ -98,6 +120,12 @@
         filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg)
           brightness(118%) contrast(119%);
       }
+
+      @media (max-width: 650px) {
+        border-radius: 10px;
+        align-items: start;
+        top: 0;
+      }
     }
 
     &__content {
@@ -119,11 +147,12 @@
         align-items: center;
 
         @media (max-width: 785px) {
+          row-gap: 25px;
           justify-content: center;
         }
 
         @media (max-width: 460px) {
-          padding: 15px;
+          padding: 0 15px;
         }
 
         .no-projects {
@@ -172,17 +201,17 @@
             font-weight: 700;
             font-size: 18px;
           }
+
+          @media (max-width: 650px) {
+            height: 40px;
+            font-size: 12px;
+          }
         }
 
         .create-newProject {
           display: flex;
           align-items: center;
 
-          @media (max-width: 450px) {
-            flex-direction: column;
-            row-gap: 15px;
-          }
-
           p {
             margin-left: 32px;
             font-weight: 400;
@@ -192,8 +221,6 @@
 
             @media (max-width: 450px) {
               max-width: none;
-              margin-left: 0;
-              text-align: center;
             }
           }
         }
@@ -204,6 +231,10 @@
         background: #ffffff;
         border-radius: 12px;
         flex-direction: column;
+
+        @media (max-width: 650px) {
+          border-radius: 0;
+        }
       }
 
       .tasks {
@@ -211,6 +242,14 @@
           border-bottom: 1px solid #dde2e4;
           padding: 0 35px 15px;
 
+          @media (max-width: 1000px) {
+            padding: 0 15px 15px;
+          }
+
+          @media (max-width: 650px) {
+            background-color: #DFF1FF;
+          }
+
           &__wrapper {
             display: flex;
             max-width: 1280px;
@@ -223,6 +262,13 @@
             &__fullScreen {
               max-width: 1160px;
             }
+
+            @media (max-width: 1350px) {
+              display: flex;
+              flex-wrap: wrap;
+              gap: 10px;
+              padding: 0px;
+            }
           }
 
           h5 {
@@ -236,6 +282,11 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+
+            @media (max-width: 1350px) {
+              width: 100%;
+              max-width: none;
+            }
           }
 
           &__add {
@@ -260,6 +311,14 @@
               display: flex;
               align-items: center;
             }
+
+            @media (max-width: 1350px) {
+              margin-left: 0;
+            }
+
+            @media (max-width: 700px) {
+              width: 100%;
+            }
           }
 
           &__persons {
@@ -267,6 +326,14 @@
             display: flex;
             align-items: center;
 
+            @media (max-width: 700px) {
+              right: -15px;
+            }
+
+            @media (max-width: 465px) {
+              width: 100%;
+            }
+
             .projectPersons {
               display: flex;
               position: relative;
@@ -469,6 +536,10 @@
             display: flex;
             align-items: center;
 
+            @media (max-width: 650px) {
+              margin: 0;
+            }
+
             span {
               color: #252c32;
               font-weight: 400;
@@ -506,6 +577,16 @@
             max-width: 220px;
             width: 100%;
 
+            @media (max-width: 915px) {
+              margin-right: 0;
+              width: 100%;
+              max-width: none;
+            }
+
+            @media (max-width: 650px) {
+              border-color: gray;
+            }
+
             &Selected {
               display: flex;
               align-items: center;
@@ -619,6 +700,10 @@
                 font-weight: 500;
               }
             }
+
+            @media (max-width: 1150px) {
+              display: none;
+            }
           }
         }
 
@@ -646,6 +731,13 @@
             background: #c5c0c6;
             border-radius: 20px;
           }
+
+          @media (max-width: 900px) {
+            padding: 15px;
+            flex-direction: column;
+            row-gap: 25px;
+            transform: none;
+          }
         }
 
         &__board {
@@ -663,10 +755,15 @@
           height: fit-content;
           position: relative;
           transition: all 0.3s ease;
-          //max-height: 500px;
-          //overflow-y: auto;
           transform: scaleY(-1);
 
+          @media (max-width: 900px) {
+            min-width: auto;
+            width: 100%;
+            max-width: none;
+            transform: scaleX(1);
+          }
+
           &::-webkit-scrollbar {
             width: 3px;
             border-radius: 10px;
@@ -712,6 +809,14 @@
               transition: 0.3s;
             }
 
+            @media (max-width: 900px) {
+              width: 100%;
+
+              &:hover {
+                transform: none;
+              }
+            }
+
             &__hide {
               opacity: 0;
             }
@@ -1104,13 +1209,22 @@
               &__info {
                 display: flex;
                 flex-direction: column;
-                max-width: 730px;
+                max-width: 535px;
+
+                @media (max-width: 820px) {
+                  text-align: center;
+                  max-width: none;
+                }
 
                 h5 {
                   font-weight: 700;
                   font-size: 20px;
                   line-height: 24px;
                   margin-bottom: 0;
+
+                  @media (max-width: 820px) {
+                    font-size: 19px;
+                  }
                 }
 
                 p {
@@ -1130,6 +1244,10 @@
                 img {
                   width: 40px;
                 }
+
+                @media (max-width: 820px) {
+                  justify-content: center;
+                }
               }
 
               &__project {
@@ -1146,6 +1264,19 @@
                   font-size: 14px;
                 }
               }
+
+              @media (max-width: 820px) {
+                row-gap: 10px;
+                flex-direction: column;
+              }
+
+              @media (max-width: 650px) {
+                background-color: white;
+              }
+
+              @media (max-width: 450px) {
+                padding: 12px 15px;
+              }
             }
           }
         }
@@ -1158,7 +1289,7 @@
         display: flex;
         column-gap: 28px;
 
-        @media (max-width: 880px) {
+        @media (max-width: 1100px) {
           flex-direction: column;
           row-gap: 20px;
         }
@@ -1191,6 +1322,10 @@
                 font-size: 15px;
               }
             }
+
+            @media (max-width: 450px) {
+              flex-wrap: wrap;
+            }
           }
 
           &__tasksWrapper {
@@ -1234,7 +1369,6 @@
             background: #f1f1f1;
             border-radius: 12px;
             padding: 12px 42px 7px 32px;
-            transition: 0.4s;
 
             &:hover {
               transform: scale(0.99);
@@ -1294,6 +1428,15 @@
                 }
               }
             }
+
+            @media (max-width: 740px) {
+              flex-direction: column;
+              padding: 10px 20px;
+            }
+
+            @media (max-width: 650px) {
+              background-color: white;
+            }
           }
 
           &__tasks {
@@ -1303,7 +1446,7 @@
             width: 65%;
             overflow: hidden;
 
-            @media (max-width: 880px) {
+            @media (max-width: 1100px) {
               width: 100%;
             }
 
@@ -1331,6 +1474,11 @@
                 max-width: 150px;
               }
 
+              @media (max-width: 450px) {
+                margin-left: 0;
+                max-width: none;
+              }
+
               input {
                 width: 100%;
                 padding-left: 10px;
@@ -1356,8 +1504,9 @@
             max-height: 450px;
             padding-right: 15px;
 
-            @media (max-width: 880px) {
+            @media (max-width: 1100px) {
               width: 100%;
+              min-height: auto;
             }
           }
 
@@ -1373,9 +1522,38 @@
               color: #111112;
               text-align: center;
             }
+
+            @media (max-width: 650px) {
+              background-color: white;
             }
           }
         }
       }
     }
+
+    @media (max-width: 650px) {
+
+      &__content {
+        padding: 28px 0 0;
+        background-color: #DFF1FF;
+
+        .project {
+          background-color: white;
+          max-width: 394px;
+        }
+      }
+
+      .projectsTab {
+        background-color: #DFF1FF;
+      }
+
+      .tasksTab {
+        background-color: #E8FFEB;
+      }
+
+      .archiveTab {
+        background-color: #FFECEF;
+      }
+    }
+  }
 }

src/pages/TrackerAuth/trackerAuth.scss

@@ -10,6 +10,10 @@
       padding-top: 100px;
     }
 
+    @media (max-width: 1000px) {
+      background-color: white;
+    }
+
     .container {
       padding-bottom: 30px;
     }
@@ -29,7 +33,21 @@
         right: 10px;
         max-width: 300px;
 
+        @media (max-width: 600px) {
+          max-width: 257px;
+          right: 0;
         }
+
+        @media (max-width: 483px) {
+          max-width: 160px;
+          left: -175px;
+        }
+      }
+    }
+
+    @media (max-width: 600px) {
+      font-size: 24px;
+      margin-bottom: 25px;
     }
   }
 }

src/pages/TrackerIntro/trackerIntro.scss

@@ -3,6 +3,14 @@
     font-family: "LabGrotesque", sans-serif;
     background-color: #f1f1f1;
     color: #000000;
+
+    @media (max-width: 1375px) {
+      padding-top: 80px;
+    }
+
+    @media (max-width: 1200px) {
+      background-color: white;
+    }
   }
 
   &__intro {
@@ -14,12 +22,33 @@
     &__img {
       max-width: 530px;
       max-height: 287px;
+
+      @media (max-width: 1100px) {
+        max-width: 35%;
+      }
+
+      @media (max-width: 800px) {
+        margin-top: 25px;
+        max-width: 350px;
+      }
+
+      @media (max-width: 450px) {
+        max-width: 280px;
+      }
     }
 
     &__info {
       display: flex;
       flex-direction: column;
       margin-right: 50px;
+
+      @media (max-width: 1100px) {
+        align-items: center;
+      }
+
+      @media (max-width: 800px) {
+        margin-right: 0;
+      }
     }
 
     &__suptitle {
@@ -31,6 +60,10 @@
         font-weight: 500;
         font-size: 16px;
       }
+
+      @media (max-width: 1100px) {
+        display: none;
+      }
     }
 
     &__title {
@@ -48,6 +81,30 @@
         bottom: -30px;
         right: 0;
         max-width: 405px;
+
+        @media (max-width: 1175px) {
+          max-width: none;
+          width: 100%;
+        }
+
+        @media (max-width: 800px) {
+          max-width: 250px;
+          left: 50%;
+          margin-left: -120px;
+        }
+      }
+
+      @media (max-width: 1100px) {
+        text-align: center;
+      }
+
+      @media (max-width: 800px) {
+        font-size: 28px;
+        display: block;
+      }
+
+      @media (max-width: 450px) {
+        margin-bottom: 55px;
       }
     }
 
@@ -55,6 +112,27 @@
       font-size: 17px;
       font-weight: 500;
       margin-bottom: 105px;
+
+      @media (max-width: 1100px) {
+        text-align: center;
+        margin-bottom: 50px;
+      }
+
+      @media (max-width: 500px) {
+        display: none;
+      }
+    }
+
+    @media (max-width: 1200px) {
+      align-items: center;
+    }
+
+    @media (max-width: 800px) {
+      flex-direction: column;
+    }
+
+    @media (max-width: 800px) {
+      padding: 40px 0;
     }
   }
 
@@ -87,10 +165,29 @@
       margin-bottom: 34px;
     }
 
+    .board {
+      width: 100%;
+    }
+
     .heard {
       position: absolute;
       bottom: -64px;
       left: 325px;
+
+      @media (max-width: 1320px) {
+        left: inherit;
+        right: 80px;
+        bottom: inherit;
+        top: 30px;
+      }
+
+      @media (max-width: 900px) {
+        max-width: 70px;
+      }
+
+      @media (max-width: 650px) {
+        display: none;
+      }
     }
 
     &__info {
@@ -103,8 +200,28 @@
         font-weight: 500;
         max-width: 695px;
         margin-bottom: 30px;
+
+        @media (max-width: 700px) {
+          font-size: 20px;
         }
       }
+
+      @media (max-width: 880px) {
+        width: 100%;
+        padding: 0 30px;
+        align-items: center;
+
+        p {
+          text-align: center;
+          max-width: none;
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    @media (max-width: 1000px) {
+      margin-bottom: 60px;
+    }
   }
 
   &__info {
@@ -132,6 +249,15 @@
         position: absolute;
         max-width: 311px;
         bottom: -28px;
+
+        @media (max-width: 650px) {
+          max-width: 196px;
+        }
+      }
+
+      @media (max-width: 650px) {
+        font-size: 24px;
+        margin-bottom: 65px;
       }
     }
 
@@ -139,6 +265,11 @@
       display: flex;
       justify-content: space-between;
       width: 100%;
+
+      @media (max-width: 850px) {
+        flex-direction: column;
+        row-gap: 50px;
+      }
     }
 
     &__item {
@@ -146,6 +277,10 @@
       flex-direction: column;
       max-width: 415px;
 
+      @media (max-width: 850px) {
+        max-width: none;
+      }
+
       &Head {
         display: flex;
         align-items: center;
@@ -161,6 +296,12 @@
           height: 71px;
           color: #FFFFFF;
           font-size: 30px;
+
+          @media (max-width: 650px) {
+            width: 50px;
+            height: 50px;
+            font-size: 24px;
+          }
         }
 
         h3 {
@@ -168,6 +309,15 @@
           font-size: 32px;
           font-weight: 500;
           margin-bottom: 0;
+
+          @media (max-width: 650px) {
+            margin-left: 26px;
+            font-size: 21px;
+          }
+        }
+
+        @media (max-width: 650px) {
+          margin-bottom: 26px;
         }
       }
 
@@ -175,6 +325,10 @@
         font-size: 19px;
         font-weight: 500;
         line-height: 32px;
+
+        @media (max-width: 650px) {
+          font-size: 16px;
+        }
       }
     }
   }

src/pages/TrackerRegistration/TrackerRegistration.js

@@ -34,14 +34,14 @@ export const TrackerRegistration = () => {
                 <span>Ваше имя *</span>
                 <input placeholder="Имя" />
               </div>
-              <div className="trackerRegistration__inputContainer">
-                <span>Придумайте пароль*</span>
-                <input placeholder="Пароль" />
-              </div>
               <div className="trackerRegistration__inputContainer">
                 <span>Ваш email *</span>
                 <input placeholder="Email" type="email" />
               </div>
+              <div className="trackerRegistration__inputContainer">
+                <span>Придумайте пароль*</span>
+                <input placeholder="Пароль" />
+              </div>
               <div className="trackerRegistration__inputContainer">
                 <span>Повторите пароль*</span>
                 <input placeholder="Повторите пароль" />

src/pages/TrackerRegistration/trackerRegistration.scss

@@ -21,12 +21,26 @@
     background: #FFF;
     padding: 59px 115px 70px 102px;
 
+    @media (max-width: 1000px) {
+      display: flex;
+      flex-direction: column;
+      padding: 0;
+    }
+
     &__inputs {
       display: flex;
       flex-wrap: wrap;
       max-width: 650px;
       row-gap: 25px;
       column-gap: 44px;
+
+      @media (max-width: 1000px) {
+        order: 2;
+      }
+
+      @media (max-width: 6755px) {
+        margin-bottom: 35px;
+      }
     }
 
     &__submit {
@@ -43,6 +57,16 @@
         border: none;
         margin-right: 165px;
       }
+
+      @media (max-width: 1000px) {
+        order: 3;
+      }
+
+      @media (max-width: 675px) {
+        flex-direction: column;
+        align-items: start;
+        row-gap: 35px;
+      }
     }
 
     &__info {
@@ -50,6 +74,10 @@
       align-items: center;
       img {
         margin-right: 31px;
+
+        @media (max-width: 675px) {
+          margin-right: 27px;
+        }
       }
 
       p {
@@ -58,6 +86,10 @@
         line-height: 22px;
         color: #000;
         max-width: 430px;
+
+        @media (max-width: 675px) {
+          font-size: 14px;
+        }
       }
     }
 
@@ -65,6 +97,15 @@
       position: absolute;
       top: -100px;
       right: 58px;
+
+      @media (max-width: 1000px) {
+        position: inherit;
+        order: 1;
+        top: inherit;
+        right: inherit;
+        max-width: 115px;
+        margin-bottom: 25px;
+      }
     }
   }
   &__inputContainer {
@@ -91,5 +132,10 @@
       font-size: 15px;
       color: #000;
     }
+
+    @media (max-width: 675px) {
+      margin-bottom: 0;
+      max-width: none;
+    }
   }
 }