diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
index e1f9f23..ccb0c4d 100644
--- a/src/runtime/components/Pages/TestVuetify.vue
+++ b/src/runtime/components/Pages/TestVuetify.vue
@@ -1,10 +1,8 @@
 <template>
   <v-app>
-    <partsHeaderErg>
-    </partsHeaderErg>
+    <partsHeaderErg />
     <NuxtPage />
-    <v-container >
-
+    <v-container>
       <partsCard
         :date-author-right="true"
         :horizontal-card="true"
@@ -16,8 +14,8 @@
             class: 'rounded-circle',
             'max-width': 86,
             height: 86,
-            cover: true
-          }
+            cover: true,
+          },
         }"
         variant-card="elevated"
         style-card="standard"
@@ -38,28 +36,31 @@
             class: 'rounded-circle',
             'max-width': 20,
             height: 20,
-            cover: true
-          }
+            cover: true,
+          },
         }"
         :modal="true"
         :modal-img="'https://www.figma.com/file/4olLWc8CXyZmkwje9SuEah/image/2d13c92b16b427ccd0b154544ab7922d50edb16c'"
       />
-
     </v-container>
 
     <partsFooterDefault
       :logo-in-body="true"
-      :logo="{title: 'АО', colorClass: 'text-white'}"
-      :nav="[{id:1,text:'Overview',link:'/'},{id:2,text:'Features',link:'/'},{id:3,text:'Pricing',link:'/'},{id:4,text:'Careers',link:'/'},{id:5,text:'Help centre',link:'/'}, {id:6,text:'Privacy',link:'/'}]"
+      :logo="{ title: 'АО', colorClass: 'text-white' }"
+      :nav="[
+        { id: 1, text: 'Overview', link: '/' },
+        { id: 2, text: 'Features', link: '/' },
+        { id: 3, text: 'Pricing', link: '/' },
+        { id: 4, text: 'Careers', link: '/' },
+        { id: 5, text: 'Help centre', link: '/' },
+        { id: 6, text: 'Privacy', link: '/' },
+      ]"
       copyright="2023 Untitled UI. All rights reserverd"
-    >
-
-    </partsFooterDefault>
+    />
   </v-app>
 </template>
 
-<script setup>
-</script>
+<script setup></script>
 
 <style>
 /* Redundant unused code to test treeshaking */
diff --git a/src/runtime/components/Parts/Card.vue b/src/runtime/components/Parts/Card.vue
index 13048b3..0f470bf 100644
--- a/src/runtime/components/Parts/Card.vue
+++ b/src/runtime/components/Parts/Card.vue
@@ -25,7 +25,12 @@
         :class="hoverText ? 'card__text-hover' : ''"
         class="d-flex align-center"
       >
-        <v-img v-if="textImage" :src="textImage.src" v-bind="textImage.attrs" class="mr-2"/>
+        <v-img
+          v-if="textImage"
+          :src="textImage.src"
+          v-bind="textImage.attrs"
+          class="mr-2"
+        />
         <span>{{ text }}</span>
       </v-card-text>
 
@@ -36,7 +41,12 @@
         class="d-flex align-center"
         @click="openModal = true"
       >
-        <v-img v-if="textImage" :src="textImage.src" v-bind="textImage.attrs" class="mr-2"/>
+        <v-img
+          v-if="textImage"
+          :src="textImage.src"
+          v-bind="textImage.attrs"
+          class="mr-2"
+        />
         <span class="text-15">{{ text }}</span>
       </v-card-text>
 
@@ -172,7 +182,7 @@ const imageModalAttrs = ref({
   ...mainStore.getObjectPropertiesWithPrefix(attrs, 'modal-image')
 })
 
-let openModal = ref(false)
+const openModal = ref(false)
 
 const props = defineProps({
   styleCard: { type: String, default: "standard" },
diff --git a/src/runtime/components/Parts/ErgVacancies.vue b/src/runtime/components/Parts/ErgVacancies.vue
index 427fcdb..a7b9d3b 100644
--- a/src/runtime/components/Parts/ErgVacancies.vue
+++ b/src/runtime/components/Parts/ErgVacancies.vue
@@ -12,13 +12,16 @@
     >
       <v-row :style="leftImage || rightImage ? '' : 'display: contents'">
         <v-col
+          v-if="leftImage"
           cols="12"
           md="6"
-          v-if="leftImage"
           :style="leftImage ? '' : 'display: contents'"
           class="py-0"
         >
-          <v-img :src="leftImage.src" v-bind="leftImage.attrs" />
+          <v-img
+            :src="leftImage.src"
+            v-bind="leftImage.attrs"
+          />
         </v-col>
         <v-col
           cols="12"
@@ -26,40 +29,73 @@
           :style="[leftImage || rightImage ? '' : 'display: contents', bodyAttrs]"
           class="py-0 px-5"
         >
-          <v-chip v-bind="chip.attrs"
-          >
+          <v-chip v-bind="chip.attrs">
             {{ chip.text }}
           </v-chip>
           <div class="vacancies__body">
-            <h2 class="mb-2" :style="titleAttrs">{{ title || 'Станьте частью команды' }}</h2>
-            <p class="mb-4" :style="subTitleAttrs">{{ subTitle || 'Мы предлагаем конкурентные зарплаты, социальные гарантии' }}</p>
+            <h2
+              class="mb-2"
+              :style="titleAttrs"
+            >
+              {{ title || 'Станьте частью команды' }}
+            </h2>
+            <p
+              class="mb-4"
+              :style="subTitleAttrs"
+            >
+              {{ subTitle || 'Мы предлагаем конкурентные зарплаты, социальные гарантии' }}
+            </p>
           </div>
-          <v-btn v-bind="buttonAttrs" class="text-none" color="white">
+          <v-btn
+            v-bind="buttonAttrs"
+            class="text-none"
+            color="white"
+          >
             {{ buttonText || 'Связаться с нами' }}
           </v-btn>
         </v-col>
         <v-col
+          v-if="rightImage"
           cols="12"
           md="6"
-          v-if="rightImage"
           :style="rightImage ? '' : 'display: contents'"
           class="py-0"
         >
-          <v-img :src="rightImage.src" v-bind="rightImage.attrs" />
+          <v-img
+            :src="rightImage.src"
+            v-bind="rightImage.attrs"
+          />
         </v-col>
       </v-row>
     </v-sheet>
-    <v-row style="flex-wrap: nowrap" v-if="gallery" class="overflow-x-auto">
+    <v-row
+      v-if="gallery"
+      style="flex-wrap: nowrap"
+      class="overflow-x-auto"
+    >
       <v-col
-        cols="3"
         v-for="img in galleryImages"
         :key="img.src"
+        cols="3"
         class="gallery-col rounded-xl"
       >
         <div :class="galleryHoverEffect ? 'gallery-item' : 'position-relative'">
-          <v-img :src="img.src" class="gallery-image rounded-xl" width="100%" cover :height="280"/>
-          <span class="gallery-title text-h5" v-if="galleryHoverEffect">{{ img.text }}</span>
-          <v-chip v-if="!galleryHoverEffect" v-bind="img.chip.attrs" class="gallery-chip">
+          <v-img
+            :src="img.src"
+            class="gallery-image rounded-xl"
+            width="100%"
+            cover
+            :height="280"
+          />
+          <span
+            v-if="galleryHoverEffect"
+            class="gallery-title text-h5"
+          >{{ img.text }}</span>
+          <v-chip
+            v-if="!galleryHoverEffect"
+            v-bind="img.chip.attrs"
+            class="gallery-chip"
+          >
             {{ img.chip.text }}
           </v-chip>
         </div>
diff --git a/src/runtime/components/Parts/Footer/Default.vue b/src/runtime/components/Parts/Footer/Default.vue
index 6d149a2..d5fa31f 100644
--- a/src/runtime/components/Parts/Footer/Default.vue
+++ b/src/runtime/components/Parts/Footer/Default.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-footer class="footer" :class="bgClass">
+  <v-footer
+    class="footer"
+    :class="bgClass"
+  >
     <v-container class="px-0">
       <div
         v-if="Object.keys(firstStyleTop).length"
@@ -199,7 +202,10 @@
         class="text-primary-gray"
       >
       <div class="footer-bottom">
-        <v-row class="d-flex align-center" :class="Object.keys(firstStyleTop).length ? 'pt-7 pb-sm-15' : 'py-3'">
+        <v-row
+          class="d-flex align-center"
+          :class="Object.keys(firstStyleTop).length ? 'pt-7 pb-sm-15' : 'py-3'"
+        >
           <v-col
             v-if="logoInBottom === true"
             cols="12"
diff --git a/src/runtime/components/Parts/Forms.vue b/src/runtime/components/Parts/Forms.vue
index 05c78ed..0c25573 100644
--- a/src/runtime/components/Parts/Forms.vue
+++ b/src/runtime/components/Parts/Forms.vue
@@ -210,7 +210,9 @@
           cols="12"
           class="text-center mb-7"
         >
-          <h5 class="text-sm-32 text-h5">{{ title }}</h5>
+          <h5 class="text-sm-32 text-h5">
+            {{ title }}
+          </h5>
         </v-col>
         <v-col
           v-if="bigImage.length"
@@ -367,7 +369,9 @@
       ref="form"
       @submit.prevent="dataForm($refs.form.isValid)"
     >
-      <h2 class="mb-10 text-36">{{ title }}</h2>
+      <h2 class="mb-10 text-36">
+        {{ title }}
+      </h2>
       <v-row>
         <v-col
           v-for="(input, index) in inputs"
@@ -391,9 +395,9 @@
         {{ buttonSetting.text }}
       </v-btn>
       <v-checkbox
+        v-if="Object.keys(checkboxSetting).length"
         v-model="checked"
         v-bind="checkboxSetting.attrs"
-        v-if="Object.keys(checkboxSetting).length"
       >
         <template #label>
           <span class="text-13">{{ checkboxSetting.label }}</span>
diff --git a/src/runtime/components/Parts/Header/Erg.vue b/src/runtime/components/Parts/Header/Erg.vue
index ee2ae35..c8747a2 100644
--- a/src/runtime/components/Parts/Header/Erg.vue
+++ b/src/runtime/components/Parts/Header/Erg.vue
@@ -17,7 +17,10 @@
         </div>
 
         <div class="ml-auto flex-grow-1 justify-center align-start d-lg-flex d-none flex-column">
-          <ul class="d-flex align-center" style="column-gap: 32px">
+          <ul
+            class="d-flex align-center"
+            style="column-gap: 32px"
+          >
             <li
               v-for="menu_item in menu"
               :key="`header-menu-item-${menu_item.id}`"
@@ -38,12 +41,16 @@
           <v-select
             v-model="selectLang"
             :items="filteredLangs"
-            @update:modelValue="updateSelectLang"
             hide-details="true"
             variant="solo"
             class="mr-4 bg-none"
+            @update:modelValue="updateSelectLang"
           />
-          <v-btn class="bg-white text-none text-body-1 d-none d-lg-block" rounded="xl" @click="buttonClick">
+          <v-btn
+            class="bg-white text-none text-body-1 d-none d-lg-block"
+            rounded="xl"
+            @click="buttonClick"
+          >
             {{ textBtn || 'Связаться с нами' }}
           </v-btn>
         </div>
@@ -52,9 +59,7 @@
           class="d-block d-lg-none my-auto"
           @click="menu_open = !menu_open"
         />
-
       </v-container>
-
     </v-app-bar>
     <v-navigation-drawer
       v-model="menu_open"
@@ -79,7 +84,13 @@
         </li>
       </ul>
 
-      <v-btn class="bg-white text-none text-body-1" block size="large" rounded="xl" @click="buttonClick">
+      <v-btn
+        class="bg-white text-none text-body-1"
+        block
+        size="large"
+        rounded="xl"
+        @click="buttonClick"
+      >
         {{ textBtn || 'Связаться с нами' }}
       </v-btn>
     </v-navigation-drawer>
diff --git a/src/runtime/components/Parts/Modal.vue b/src/runtime/components/Parts/Modal.vue
index ee722d2..8ccdb69 100644
--- a/src/runtime/components/Parts/Modal.vue
+++ b/src/runtime/components/Parts/Modal.vue
@@ -2,10 +2,10 @@
   <v-dialog v-model="value">
     <v-card :rounded="rounded">
       <div
+        v-if="!imgOnly"
         class="w-100 d-flex"
         :class="{'position-absolute pt-5 px-5': imgFluid}"
         style="z-index: 1000"
-        v-if="!imgOnly"
       >
         <v-btn
           v-bind="closeButtonAttrs"
@@ -32,9 +32,9 @@
       </div>
 
       <v-card-text
+        v-if="!imgOnly"
         class="pt-0 pb-4 d-flex align-center"
         :class="{'flex-column': iconCenter}"
-        v-if="!imgOnly"
       >
         <div
           v-if="icon.length"
diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
index 74e04df..f88c6a5 100644
--- a/src/runtime/components/Parts/Slider.vue
+++ b/src/runtime/components/Parts/Slider.vue
@@ -6,7 +6,7 @@
       :slides-per-view="sliderPeeking ? '1.3' : '1'"
       class="overflow-hidden w-100"
       :class="[`rounded-${rounded}`]"
-      :style="{'height': height}"
+      :style="{ height: height }"
       @swiperslidechange="updatePagination"
     >
       <swiper-slide
@@ -23,38 +23,47 @@
           <!-- Image -->
           <v-img
             class="slider-img position-absolute h-100 w-100"
-            style="z-index: -1;"
+            style="z-index: -1"
             cover
             :src="slide.backgroundImg"
           />
           <!-- Image END -->
         </div>
         <v-row :style="slide.img ? '' : 'display: contents'">
-          <v-col cols="12" lg="6" class="px-0" :style="slide.img ? '' : 'display: contents'">
+          <v-col
+            cols="12"
+            lg="6"
+            class="px-0"
+            :style="slide.img ? '' : 'display: contents'"
+          >
             <div
-              class=" h-100"
+              class="h-100"
               :class="[
-                {'px-12': !sliderContainer},
-                {'v-container' : sliderContainer},
-                {'d-flex flex-column justify-center align-start': !slide.textBlockAttrs}
-                ]"
+                { 'px-12': !sliderContainer },
+                { 'v-container': sliderContainer },
+                {
+                  'd-flex flex-column justify-center align-start':
+                    !slide.textBlockAttrs,
+                },
+              ]"
             >
               <div>
                 <!-- Slide title -->
                 <!-- Добавил возможность указывать тег чтобы была возможность для настройки SEO -->
-                <v-chip v-if="slide.chip" v-bind="slide.chip.attrs">
+                <v-chip
+                  v-if="slide.chip"
+                  v-bind="slide.chip.attrs"
+                >
                   {{ slide.chip.text }}
                 </v-chip>
                 <component
-                  :is="slide.titleTag ? slide.titleTag: 'p'"
+                  :is="slide.titleTag ? slide.titleTag : 'p'"
                   v-bind="slide.titleAttrs"
                 >
                   {{ slide.title }}
                 </component>
 
-                <p
-                  v-bind="slide.subTitleAttrs"
-                >
+                <p v-bind="slide.subTitleAttrs">
                   {{ slide.subtitle }}
                 </p>
                 <!-- Slide title -->
@@ -65,7 +74,10 @@
               <!-- body slot end -->
 
               <!-- Slider buttons -->
-              <div class="mb-15" v-if="slide.buttons">
+              <div
+                v-if="slide.buttons"
+                class="mb-15"
+              >
                 <v-btn
                   v-for="button in slide.buttons"
                   :key="button.id"
@@ -77,7 +89,12 @@
               <!-- Slider buttons END -->
             </div>
           </v-col>
-          <v-col cols="12" lg="6" class="px-0" :style="slide.img ? '' : 'display: contents'">
+          <v-col
+            cols="12"
+            lg="6"
+            class="px-0"
+            :style="slide.img ? '' : 'display: contents'"
+          >
             <div
               v-if="slide.img"
               class=""
@@ -85,7 +102,7 @@
               <!-- Image -->
               <v-img
                 class="slider-img h-100 w-100"
-                style="z-index: -1;"
+                style="z-index: -1"
                 cover
                 :src="slide.img.src"
                 v-bind="slide.img.attrs"
@@ -94,8 +111,6 @@
             </div>
           </v-col>
         </v-row>
-
-
       </swiper-slide>
     </swiper-container>
 
@@ -103,9 +118,7 @@
       v-if="controlButtonsAlign === 'center'"
       class="control-buttons-center-container"
     >
-      <div
-        class="d-flex justify-space-between px-0"
-      >
+      <div class="d-flex justify-space-between px-0">
         <v-btn
           v-bind="controlButtonPrevAttrs"
           icon="mdi-chevron-left"
@@ -125,7 +138,10 @@
       class="control-buttons-right-container"
     >
       <div
-        :class="[{'px-12' : !sliderContainer}, {'v-container' : sliderContainer}]"
+        :class="[
+          { 'px-12': !sliderContainer },
+          { 'v-container': sliderContainer },
+        ]"
         class="d-flex flex-column align-end"
       >
         <v-btn
@@ -146,13 +162,9 @@
     <div
       v-if="controlButtonsAlign === 'left-bottom'"
       class="control-buttons-left-bottom-container"
-      :class="[
-        {'px-9': !sliderContainer},
-      ]"
+      :class="[{ 'px-9': !sliderContainer }]"
     >
-      <div
-        class="d-flex px-0"
-      >
+      <div class="d-flex px-0">
         <v-btn
           v-bind="controlButtonPrevAttrs"
           icon="mdi-chevron-left"
@@ -171,28 +183,39 @@
     <div class="slider_pagination_container">
       <div
         class="w-100 d-flex align-end"
-        :class="[{'px-12': !sliderContainer}, {'v-container' : sliderContainer}]"
+        :class="[
+          { 'px-12': !sliderContainer },
+          { 'v-container': sliderContainer },
+        ]"
       >
         <!-- Pagination -->
         <div
           v-if="sliderPagination"
           class="slider_pagination"
-          :class="{'mx-auto': sliderPaginationCenter}"
+          :class="{ 'mx-auto': sliderPaginationCenter }"
         >
           <span
             v-for="(slide, index) in pagination"
             :key="slide.id"
             :class="[
               slide.active ? `bg-${props.sliderPaginationActiveVariant}` : '',
-              sliderPaginationType === 'bullet' ? 'slider-pagination-bullet' :
-              sliderPaginationType === 'dot' ? 'slider-pagination-dot' : '', ]"
+              sliderPaginationType === 'bullet'
+                ? 'slider-pagination-bullet'
+                : sliderPaginationType === 'dot'
+                  ? 'slider-pagination-dot'
+                  : '',
+            ]"
             @click="slideTo(index)"
           />
         </div>
         <!-- Pagination END -->
 
         <div
-          v-if="controlButtonsAlign === 'right' && swiper !== null && !sliderPagination"
+          v-if="
+            controlButtonsAlign === 'right' &&
+              swiper !== null &&
+              !sliderPagination
+          "
           class="ml-auto"
         >
           {{ activeSlide + 1 }} / {{ slides.length }}
@@ -224,49 +247,49 @@
 </template>
 
 <script setup>
-import { register } from 'swiper/element/bundle';
-register()
+import { register } from "swiper/element/bundle";
+register();
 
-import { defineProps, useAttrs, ref, onMounted } from 'vue'
+import { defineProps, useAttrs, ref, onMounted } from "vue";
 import { useMainStore } from "../../../store/mainStore.js";
-const mainStore = useMainStore()
+const mainStore = useMainStore();
 
 //Attributes
-const attrs = useAttrs()
+const attrs = useAttrs();
 const sliderAttrs = {
-  ...mainStore.getObjectPropertiesWithPrefix(attrs, 'slider')
-}
-const slidesAttrs = mainStore.getObjectPropertiesWithPrefix(attrs, 'slides')
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "slider"),
+};
+const slidesAttrs = mainStore.getObjectPropertiesWithPrefix(attrs, "slides");
 const controlButtonsAttrs = {
-  ...mainStore.getObjectPropertiesWithPrefix(attrs, 'control-buttons')
-}
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "control-buttons"),
+};
 const controlButtonPrevAttrs = {
   ...controlButtonsAttrs,
-  ...mainStore.getObjectPropertiesWithPrefix(attrs, 'control-button-prev')
-}
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "control-button-prev"),
+};
 const controlButtonNextAttrs = {
   ...controlButtonsAttrs,
-  ...mainStore.getObjectPropertiesWithPrefix(attrs, 'control-button-next')
-}
+  ...mainStore.getObjectPropertiesWithPrefix(attrs, "control-button-next"),
+};
 const props = defineProps({
   rounded: {
     type: String,
-    default: '',
+    default: "",
   },
 
   height: {
     type: String,
-    default: '534px'
+    default: "534px",
   },
 
   slides: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
 
   slidesRounded: {
     type: String,
-    default: '0'
+    default: "0",
   },
 
   sliderContainer: {
@@ -281,17 +304,17 @@ const props = defineProps({
 
   sliderPaginationCenter: {
     type: Boolean,
-    default: false
+    default: false,
   },
 
   sliderPaginationType: {
     type: String,
-    default: 'bullet',
+    default: "bullet",
   },
 
   sliderPaginationActiveVariant: {
     type: String,
-    default: 'primary',
+    default: "primary",
   },
 
   sliderPeeking: {
@@ -301,124 +324,125 @@ const props = defineProps({
 
   controlButtonsAlign: {
     type: String,
-    default: 'bottom',
+    default: "bottom",
   },
-})
+});
 
 // Slider ref
-const slider = ref(null)
+const slider = ref(null);
 
-const activeSlide = ref(0)
-const pagination = ref(props.slides)
+const activeSlide = ref(0);
+const pagination = ref(props.slides);
 
 const slideTo = (index) => {
-  if(slider.value !== null) {
-    slider.value.swiper.slideTo(index)
+  if (slider.value !== null) {
+    slider.value.swiper.slideTo(index);
   }
-}
+};
 
 const slidePrev = () => {
-  if(slider.value !== null) {
-    slider.value.swiper.slidePrev(500)
+  if (slider.value !== null) {
+    slider.value.swiper.slidePrev(500);
   }
-}
+};
 
 const slideNext = () => {
-  if(slider.value !== null) {
-    slider.value.swiper.slideNext(500)
+  if (slider.value !== null) {
+    slider.value.swiper.slideNext(500);
   }
-}
+};
 
 const updatePagination = () => {
-  if(slider.value !== null) {
+  if (slider.value !== null) {
     props.slides.forEach((slide, index) => {
-      pagination.value[index].active = false
-    })
-    pagination.value[slider.value.swiper.realIndex].active = true
+      pagination.value[index].active = false;
+    });
+    pagination.value[slider.value.swiper.realIndex].active = true;
   }
-}
+};
 
 onMounted(() => {
-  console.log(slider.value.swiper)
-  activeSlide.value = slider.value.swiper.realIndex
-  if(pagination.value.length > 0) {
-    pagination.value[0].active = true
+  console.log(slider.value.swiper);
+  activeSlide.value = slider.value.swiper.realIndex;
+  if (pagination.value.length > 0) {
+    pagination.value[0].active = true;
   }
-})
+});
 </script>
 
 <style lang="scss">
-  .image-backdrop {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    z-index: -1;
-  }
+.image-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+}
 
-  //.image-backdrop::after {
-  //  content: '';
-  //  position: absolute;
-  //  top: 0;
-  //  left: 0;
-  //  width: 100%;
-  //  height: 100%;
-  //  background: rgba(#000, .5);
-  //}
-
-  .slider_pagination_container{
-    width: 100%;
-    position: absolute;
-    z-index: 1;
-    left: 0;
-    bottom: 60px;
-  }
+//.image-backdrop::after {
+//  content: '';
+//  position: absolute;
+//  top: 0;
+//  left: 0;
+//  width: 100%;
+//  height: 100%;
+//  background: rgba(#000, .5);
+//}
+
+.slider_pagination_container {
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  bottom: 60px;
+}
 
-  .slider_pagination {
-    display: flex;
-    gap: 16px;
-  }
+.slider_pagination {
+  display: flex;
+  gap: 16px;
+}
 
-  .slider-pagination-bullet, .slider-pagination-dot {
-    display: block;
-    border-radius: 80px;
-    background: #fff;
-    transition: .3s;
-    cursor: pointer;
-  }
+.slider-pagination-bullet,
+.slider-pagination-dot {
+  display: block;
+  border-radius: 80px;
+  background: #fff;
+  transition: 0.3s;
+  cursor: pointer;
+}
 
-  .slider-pagination-bullet {
-    width: 40px;
-    height: 6px;
-  }
+.slider-pagination-bullet {
+  width: 40px;
+  height: 6px;
+}
 
-  .slider-pagination-dot{
-    height: 8px;
-    width: 8px;
-  }
+.slider-pagination-dot {
+  height: 8px;
+  width: 8px;
+}
 
-  .control-buttons-center-container {
-    position: absolute;
-    width: 100%;
-    top: 50%;
-    padding: 0 32px 0 32px;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
+.control-buttons-center-container {
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  padding: 0 32px 0 32px;
+  transform: translateY(-50%);
+  z-index: 1;
+}
 
-  .control-buttons-right-container {
-    width: 100%;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-  }
+.control-buttons-right-container {
+  width: 100%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+}
 
-  .control-buttons-left-bottom-container {
-    width: 100%;
-    position: absolute;
-    bottom: 0%;
-    z-index: 1;
-  }
+.control-buttons-left-bottom-container {
+  width: 100%;
+  position: absolute;
+  bottom: 0%;
+  z-index: 1;
+}
 </style>