vertical carousel

src/components/quasar-components/carousel/VerticalCarouselImgs.vue

@@ -44,14 +44,12 @@
           <PostalCode />
         </div>
 
-        <button class="btn carousel-content-item">
+        <q-btn to="/categoria/ramos" class="btn carousel-content-item">
           <IconSearch /> ver disponibilidad
-        </button>
+        </q-btn>
       </div>
 
-      <footer class="carousel-content-footer">
-        <IconMouse />
-      </footer>
+      <!-- <footer class="carousel-content-footer"></footer> -->
     </div>
   </div>
 </template>
@@ -63,7 +61,6 @@ import { PropType, defineComponent, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import Calendar from 'src/components/@inputs/Calendar.vue';
 import PostalCode from 'src/components/@inputs/PostalCode.vue';
-import IconMouse from 'src/components/icons/IconMouse.vue';
 import IconSearch from 'src/components/icons/IconSearch.vue';
 import { useMobileStore } from 'src/stores/mobileNav';
 
@@ -93,7 +90,7 @@ export default defineComponent({
       screenWidth,
     };
   },
-  components: { IconMouse, IconSearch, Calendar, PostalCode },
+  components: { IconSearch, Calendar, PostalCode },
 });
 </script>
 
@@ -138,10 +135,27 @@ export default defineComponent({
       flex-wrap: wrap;
       border-radius: 10px 0 0 10px;
       overflow: hidden;
-      margin-bottom: 82px;
+      /* margin-bottom: 82px; */
+      min-height: 150px;
       & .carousel-content-item {
+        display: flex;
+        align-items: center;
         padding: 27px 53px 34px 48px;
         flex: 1;
+        position: relative;
+        &:first-child::after {
+          content: '';
+          position: absolute;
+          width: 1px;
+          opacity: 0.2;
+          background-color: $text-normal-100;
+          right: 0;
+          top: 27px;
+          bottom: 29px;
+          @media only screen and (max-width: $med-md) {
+            display: none;
+          }
+        }
         &.btn {
           &:focus,
           &:focus-visible {