.carousel-container {
    position: fixed;
    top: 80px; /* Start below navigation */
    bottom: 20px;
    width: 280px; /* Increased from 200px to 280px for larger images */
    min-width: 280px;
    max-width: 280px;
    overflow: visible;
    z-index: 1000;
    height: calc(100vh - 100px);
    background-color: transparent;
    pointer-events: none;
    display: block !important;
    visibility: visible !important;
}

.carousel-container.left {
    left: 20px; /* Fixed distance from left edge */
}

.carousel-container.right {
    right: 20px; /* Fixed distance from right edge */
}

.vertical-carousel {
    display: flex !important;
    flex-direction: column;
    gap: 16px; /* Increased gap for better spacing with larger images */
    animation: scrollUp 120s linear infinite;
    padding: 16px; /* Increased padding for better spacing */
    pointer-events: auto;
    visibility: visible !important;
    position: relative;
    z-index: 1001;
}

.vertical-carousel img,
.vertical-carousel video {
    width: 100%;
    height: auto;
    aspect-ratio: 1; /* Keep images square */
    object-fit: cover; 
    border-radius: 8px; /* Slightly increased border radius */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1002;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); /* Enhanced shadow for larger images */
}

.vertical-carousel:hover {
    animation-play-state: paused;
}

@keyframes scrollUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .carousel-container {
        width: 240px; /* Increased from 180px to 240px */
        min-width: 240px;
        max-width: 240px;
    }
    
    .carousel-container.left {
        left: 15px;
    }
    
    .carousel-container.right {
        right: 15px;
    }
}

@media (max-width: 1024px) {
    .carousel-container {
        width: 200px; /* Increased from 160px to 200px */
        min-width: 200px;
        max-width: 200px;
    }
    
    .carousel-container.left {
        left: 10px;
    }
    
    .carousel-container.right {
        right: 10px;
    }
    
    .vertical-carousel {
        gap: 12px; /* Adjusted gap for medium screens */
        padding: 12px;
    }
}

/* Only hide carousels on very small mobile screens */
@media (max-width: 768px) {
    .carousel-container {
        display: none !important;
    }
}