Update arrow buttons and swiper responsive

frontend/components/home/Categories.vue

@@ -60,7 +60,17 @@ const onSlideChange = (swiper: SwiperClass) => {
                     slideShadows: true,
                 }"
                 :breakpoints="{
+                    320: {
+                        coverflowEffect: {
+                            stretch: -50,
+                        },
+                        slidesPerView: 1.75,
+                        centeredSlides: true,
+                    },
                     640: {
+                        coverflowEffect: {
+                            stretch: -100,
+                        },
                         centeredSlides: true,
                         slidesPerView: 2.65,
                     },
@@ -95,7 +105,7 @@ const onSlideChange = (swiper: SwiperClass) => {
                 :style="{
                     right: `calc(50% - ${slideWidth / 2}px - 20px)`,
                 }"
-                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                class="absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-right"
@@ -109,7 +119,7 @@ const onSlideChange = (swiper: SwiperClass) => {
                 :style="{
                     left: `calc(50% - ${slideWidth / 2}px - 20px)`,
                 }"
-                class="max-xs:hidden absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                class="absolute z-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
             >
                 <Icon
                     name="ci:arrow-left"