.carousel-container {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 25px 0 15px;
        /* Hide scrollbar completely */
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        user-select: none;
        box-sizing: border-box;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .carousel-container.active {
        cursor: grabbing;
    }
    
    .carousel-container::-webkit-scrollbar {
        display: none;
    }
    
    /* Override grab cursor when hovering over tiles */
    .carousel-container:hover .tile {
        cursor: pointer !important;
    }

    .carousel-container.active .tile {
        cursor: grabbing !important;
    }
    
    .tiles-wrapper {
      display: flex;
      gap: 25px;
      padding: 15px 94px 15px 22.5px;
      flex-wrap: nowrap;
      background-color: #eee;
      min-width: 100%;
      width: max-content;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      margin-bottom: 2em;
    }
    
    .tile {
        flex-shrink: 0;
        width: 168px; /* 16:9 ratio with 300px height = 168px width */
        height: 300px;
        background: #333;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative;
    }
    
    .tile:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }
    
    /* Wave animation when not hovering over carousel */
    .tile.wave-bounce {
        animation: waveBounce 0.25s ease-in-out; /* 50% faster */
    }
    
    @keyframes waveBounce {
        0% { transform: translateY(0); }
        50% { transform: translateY(-10px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
        100% { transform: translateY(0); }
    }
    
    .tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .tile-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.8));
        color: white;
        padding: 20px 15px 15px;
        font-size: 14px;
        font-weight: 500;
    }
    
    /* Mobile optimizations */
    @media (max-width: 768px) {
        
        .tile {
            width: 140px; /* Slightly smaller on mobile */
            height: 250px;
        }
        
        .tiles-wrapper {
            gap: 10px;
            padding: 10px 80px 10px 10px; /* Top/bottom: 5px (gap÷2), Left: 15px (gap÷2 + 10px), Right: 80px (half tile + 10px) */
        }
        
        /* Fix potential gradient/shading artifacts */
        .carousel-container {
            position: relative;
            z-index: 1;
        }
        
        .carousel-container::before,
        .carousel-container::after {
            display: none; /* Remove any pseudo-element gradients */
        }
    }