MultipleImagesPost

styles/main.css

@@ -783,4 +783,90 @@ p {
     outline: none;
     padding-top: 8px;
     /* Align with avatar */
-}
+}
+/* --- CAROUSEL & VIDEO STYLES --- */
+
+/* Carousel Container */
+.media-carousel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+    background: #000;
+}
+
+.media-carousel::-webkit-scrollbar {
+    display: none;
+}
+
+/* Individual Slide */
+.media-slide {
+    min-width: 100%;
+    height: 100%;
+    scroll-snap-align: center;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    background: #000;
+}
+
+.media-slide img,
+.media-slide video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* or contain depending on pref */
+    display: block;
+}
+
+/* Pagination Dots */
+.carousel-dots {
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 6px;
+    z-index: 10;
+    pointer-events: none;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 50%;
+    transition: 0.2s;
+}
+
+.dot.active {
+    background: #fff;
+    transform: scale(1.2);
+}
+
+/* Post Media Wrapper (replaces .post-image) */
+.post-media-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 4/5;
+    background: #111;
+    overflow: hidden;
+}
+
+/* Update create post view to handle carousel preview */
+#create-post-view .image-upload-wrapper {
+    /* Keep aspect ratio but allow overflow for carousel */
+    display: block; 
+    overflow: hidden;
+}
+
+#media-preview-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+}
+