Responsive text carousel

Author: w3bdesign

public/css/app.css

@@ -1939,6 +1939,11 @@ video {
   .md\:pr-6 {
     padding-right: 1.5rem;
   }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
 
 @media (min-width: 1024px) {

public/js/app.js

@@ -24184,7 +24184,7 @@ var _hoisted_1 = {
 };
 var _hoisted_2 = ["src", "alt"];
 var _hoisted_3 = {
-  "class": "z-40 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block"
+  "class": "z-40 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 text-xl md:text-2xl text-black bg-white rounded-lg mt-4"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)($setup["Swiper"], {

resources/js/components/Index/Carousel.vue

@@ -4,7 +4,7 @@
         <div class="relative">
           <img :src="image.src" :alt="'Image ' + (index + 1)" class="w-full object-cover" />
           <span
-            class="z-40 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 text-2xl text-black bg-white rounded-lg mt-4 hidden md:block"
+            class="z-40 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 text-xl md:text-2xl text-black bg-white rounded-lg mt-4"
           >
             {{ image.text }}
           </span>