From fdc3cf626c46b228733b3f5dd4dd4af18296ef9c Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 12 Aug 2024 13:01:51 +0300
Subject: [PATCH] adaptivity

---
 front/src/assets/main.scss             |  4 ++++
 front/src/components/Promo/sidebar.vue | 26 ++++++++++++++++++--------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/front/src/assets/main.scss b/front/src/assets/main.scss
index 007e5ca..b45248e 100644
--- a/front/src/assets/main.scss
+++ b/front/src/assets/main.scss
@@ -21,6 +21,10 @@
     box-shadow: 0 0 4px rgba(#000, 0.5);
 
     z-index: 100;
+
+    @media(max-width: 768px) {
+        display: none;
+    }
 }
 body {
     padding-left: 2.5rem;
diff --git a/front/src/components/Promo/sidebar.vue b/front/src/components/Promo/sidebar.vue
index 469dc35..62a13b8 100644
--- a/front/src/components/Promo/sidebar.vue
+++ b/front/src/components/Promo/sidebar.vue
@@ -45,24 +45,26 @@ const sidebar_obj = ref()
 </template>
 <style scoped lang="scss">
 .sidebar {
-    width: 23vw;
+    max-width: 23vw;
     background-color: #fff;
     position: fixed;
     top: 0;
-    right: -27vw;
+    right: -50%;
     bottom: 0;
     transition: all 300ms linear;
     line-height: 1.25;
-
+    
     padding: 3rem 2rem 2rem;
 
     @media(max-width:768px) {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
+        padding-top: 2rem;;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+        max-width: 48%;
     }
 
     &.open {
-        right: 0
+        right: 0;
     }
 
     &-close {
@@ -73,7 +75,7 @@ const sidebar_obj = ref()
         color: black;
 
         @media(max-width:768px) {
-            lefT: 0.5rem;
+            left: 0.5rem;
         }
     }
 
@@ -94,7 +96,11 @@ const sidebar_obj = ref()
     h2 {
         text-align: center;
         font-size: 2rem;
-        margin: 1rem
+        margin: 1rem;
+
+        @media(max-width:768px) {
+            font-size: 1.5rem;
+        }
     }
 
     p,
@@ -104,6 +110,10 @@ const sidebar_obj = ref()
 
     p {
         font-size: 1.25rem;
+
+        @media(max-width:768px) {
+            font-size: 1rem;
+        }
     }
 
     h3 {