upd popups

src/components/popups/CookiesPopup.tsx

@@ -25,7 +25,7 @@ function CookiesPopup() {
         <motion.div
           animate={{ y: -40 }}
           transition={{ type: 'spring' }}
-          className="fixed bottom-0 sm:left-10 left-1/2 max-md:-translate-x-1/2 z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
+          className="fixed bottom-0 sm:left-10 left-1/2 max-md:left-[calc((100vw-350px)/2)] z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
         >
           <div className="bg-[#37393B]/60 rounded-2xl p-4 flex flex-col gap-5 backdrop-blur-sm">
             <div className="flex flex-col gap-2">
@@ -35,28 +35,28 @@ function CookiesPopup() {
                   alt="popup"
                   className="w-[2.222vw] h-[2.222vw] object-cover"
                 />
-                <p className="font-medium heading2">
+                <p className="heading2 font-medium">
                   Мы используем&nbsp;
                   <NavLink
                     to="/cookies"
-                    className="underline underline-offset-2"
+                    className="underline-offset-2 underline"
                     onClick={handlePopupClick}
                   >
                     cookie
                   </NavLink>
                 </p>
               </div>
-              <p className="text-[0.972vw] leading-[135%] w-full">
+              <p className="text1 leading-[135%] w-full">
                 Они помогают нам понять, как вы взаимодействуете с нашим сайтом
                 и сделать его удобнее и лучше.
               </p>
             </div>
-            <div
+            <button
               onClick={handlePopupClick}
               className="flex items-center gap-x-1 w-full justify-center btns bg-gradient rounded-xl py-[0.556vw] hover:opacity-80 transition-opacity cursor-pointer"
             >
               Принять
-            </div>
+            </button>
           </div>
         </motion.div>
       )}

src/components/popups/TelegramPopup.tsx

@@ -28,7 +28,7 @@ function TelegramPopup() {
         <motion.div
           animate={{ y: -40 }}
           transition={{ type: 'spring' }}
-          className="fixed bottom-0 sm:left-10 left-1/2 max-md:-translate-x-1/2 z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
+          className="fixed bottom-0 sm:left-10 left-1/2 max-md:left-[calc((100vw-350px)/2)] z-30 w-[350px] lg:w-[23.611vw] p-px lg:p-[0.069vw] rounded-2xl"
         >
           <div className="bg-[#37393B]/60 rounded-2xl p-4 flex flex-col gap-5 backdrop-blur-sm">
             <div className="flex flex-col gap-2">
@@ -36,11 +36,11 @@ function TelegramPopup() {
                 <img
                   src="/images/popups/tg.png"
                   alt="popup"
-                  className="w-[2.222vw] h-[2.222vw] object-cover"
+                  className="lg:w-[2.222vw] lg:h-[2.222vw] w-8 h-8 object-cover"
                 />
-                <p className="font-medium heading2">GRAFF.estate</p>
+                <p className="heading2 font-medium">GRAFF.estate</p>
               </div>
-              <p className="text-[0.972vw] leading-[135%] w-full">
+              <p className="text1 leading-[135%] w-full">
                 Новости разработки интерактивных решений для девелоперов в нашем
                 телеграм канале
               </p>
@@ -55,7 +55,7 @@ function TelegramPopup() {
               Перейти
             </a>
             <button
-              className="absolute flex items-center justify-center p-px text-center transition-colors rounded-full cursor-pointer top-2 right-2 hover:bg-white hover:bg-opacity-10 group"
+              className="top-2 right-2 hover:bg-white hover:bg-opacity-10 group absolute flex items-center justify-center p-px text-center transition-colors rounded-full cursor-pointer"
               onClick={handlePopupClick}
             >
               <span className="lg:w-[1.111vw] lg:h-[1.111vw] w-4 h-4 m-auto group-hover:text-black transition-colors">