fix adaptive Calendar

src/components/Calendar/calendarComponent.scss

@@ -117,25 +117,45 @@
   }
 
   &__body {
-    div {
+    &__week-days {
       display: grid;
 
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
+      @media (max-width: 680px) {
+        display: none;
+      }
+
       p {
         color: #9babc5;
         font-size: 14px;
         font-weight: 500;
         text-align: center;
       }
+
+      &-mobile {
+        display: none;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+
+        @media (max-width: 680px) {
+          display: grid;
+        }
+
+        p {
+          color: #9babc5;
+          font-size: 14px;
+          font-weight: 500;
+          text-align: center;
+        }
+      }
     }
 
     margin: 20px 0 20px;
   }
 
   &__form {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
     justify-content: space-between;
 
     button {
@@ -205,12 +225,10 @@
 
       @media (max-width: 550px) {
         width: 60px;
-        height: 35px;
       }
 
       @media (max-width: 450px) {
         width: 45px;
-        height: 35px;
       }
     }
   }
@@ -265,6 +283,11 @@
   }
   .form-box {
     background-color: #fafbfe;
+    padding: 0 10px;
+
+    @media (max-width: 450px) {
+      padding: 0;
+    }
 
     .form-hours {
       color: #6dd077;
@@ -284,6 +307,11 @@
         font-weight: 700;
         font-size: 14px;
         margin: auto;
+
+        @media (max-width: 680px) {
+          font-weight: 700;
+          font-size: 10px;
+        }
       }
     }
     .form-hours::before {