routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/components/VCarousel/VCarousel.css

@@ -0,0 +1,63 @@
+@layer vuetify-components {
+  .v-carousel {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+  }
+  .v-carousel__controls {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    height: 50px;
+    justify-content: center;
+    list-style-type: none;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+  }
+  .v-carousel__controls {
+    background: color-mix(in srgb, rgb(var(--v-theme-surface-variant)) 30%, transparent);
+    color: rgb(var(--v-theme-on-surface-variant));
+  }
+  .v-carousel__controls > .v-item-group {
+    flex: 0 1 auto;
+  }
+  .v-carousel__controls__item {
+    margin: 0 8px;
+  }
+  .v-carousel__controls__item .v-icon {
+    opacity: 0.5;
+  }
+  .v-carousel__controls__item--active .v-icon {
+    opacity: 1;
+    vertical-align: middle;
+  }
+  .v-carousel__controls__item:hover {
+    background: none;
+  }
+  .v-carousel__controls__item:hover .v-icon {
+    opacity: 0.8;
+  }
+  .v-carousel__progress {
+    margin: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .v-carousel-item {
+    display: block;
+    height: inherit;
+    text-decoration: none;
+  }
+  .v-carousel-item > .v-img {
+    height: inherit;
+  }
+  .v-carousel--hide-delimiter-background .v-carousel__controls {
+    background: transparent;
+  }
+  .v-carousel--vertical-delimiters .v-carousel__controls {
+    flex-direction: column;
+    height: 100%;
+    width: 50px;
+  }
+}