fix mobile version

package.json

@@ -4,6 +4,8 @@
   "source": "src/index.html",
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.12.0",
+    "@parcel/babel-preset-env": "2.8.3",
     "@parcel/transformer-sass": "2.8.3",
     "autoprefixer": "^10.4.14",
     "parcel": "^2.8.3",
@@ -11,9 +13,14 @@
   },
   "scripts": {
     "dev": "parcel src/index.html",
+    "prebuild": "rm -rf ./dist",
     "build": "parcel build src/index.html"
   },
   "engines": {
     "node": "18.13.0"
+  },
+  "dependencies": {
+    "@babel/cli": "^7.21.5",
+    "@popperjs/core": "^2.11.7"
   }
 }

src/index.html

@@ -33,7 +33,7 @@
   <div class="container-wrapper">
     <div class="main-card wow animate__animated animate__zoomIn">
       <div class="open-label marquee3k" data-speed="1.25" data-reverse="false" data-pausable="false">
-        <div class="open-label__text">&nbsp; открытие в июне - открытие в июне - открытие в июне - &nbsp;</div>
+        <div class="open-label__text">открытие в июне - открытие в июне - открытие в июне -&nbsp;</div>
       </div>
 
       <h1 class="main-card__title">ЦирюльникЪ</h1>
@@ -131,7 +131,6 @@
         <div class="services__block__pedicure">
           <h3>
             <span class="services__price">799 <span>₽</span></span>
-            <br>
             ПЕДИКЮР
           </h3>
           <h3>

src/styles/main.scss

@@ -44,9 +44,8 @@
   right: 25px;
   z-index: $z_index_header;
 
-  animation: headShake;
+  -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
-  animation-duration: 2s;
+  animation: heartbeat 1.5s ease-in-out infinite both;
-  animation-iteration-count: infinite;
 
   img {
     width: 60px;
@@ -54,6 +53,75 @@
   }
 }
 
+@-webkit-keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+@keyframes heartbeat {
+  from {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  10% {
+    -webkit-transform: scale(0.91);
+    transform: scale(0.91);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  17% {
+    -webkit-transform: scale(0.98);
+    transform: scale(0.98);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+  33% {
+    -webkit-transform: scale(0.87);
+    transform: scale(0.87);
+    -webkit-animation-timing-function: ease-in;
+    animation-timing-function: ease-in;
+  }
+  45% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    -webkit-animation-timing-function: ease-out;
+    animation-timing-function: ease-out;
+  }
+}
+
 .container-wrapper {
   overflow: hidden;
   padding: 0 15px;
@@ -168,7 +236,7 @@
 
   &__title {
     @include subtitle_font;
-    text-align: center;
+    padding-left: 20px;
   }
 
   &__card {
@@ -194,7 +262,7 @@
     }
 
     &__img {
-      transform: translateY(6px);
+      transform: translateY(5px);
       width: 300px;
       height: 258.33px;
       max-width: 100%;
@@ -211,6 +279,7 @@
 
   &__title {
     @include subtitle_font;
+    padding-left: 20px;
   }
 
   &__card {
@@ -251,6 +320,7 @@
 
   &__title {
     @include subtitle_font;
+    padding-left: 20px;
   }
 
   &__card {
@@ -291,6 +361,7 @@
 
   &__title {
     @include subtitle_font;
+    padding-left: 20px;
   }
 
   &__block {
@@ -339,12 +410,13 @@
       flex-direction: column;
       gap: 28px;
       text-align: center;
+      padding: 20px 40px;
 
       h3 {
         line-height: 25px;
 
         span {
-          line-height: 20px !important;
+          line-height: 100% !important;
         }
       }
     }
@@ -357,6 +429,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
+      padding: 30px 10px 20px;
     }
 
     &__solaris {
@@ -367,6 +440,7 @@
       justify-content: center;
       align-items: center;
       text-align: center;
+      padding: 30px 25px 20px;
     }
 
     &__massage {