.gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-auto-flow: dense; /* Crucial: This fills the holes to keep it jumbled */
            grid-auto-rows: 180px; /* Adjust height of the "blocks" */
            gap: 12px;
            padding: 20px;
            max-width: 1600px;
            margin: 0 auto;
        }

        /* 2. Item Styling */
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            background-color: #eee;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
            display: block;
        }

        /* 3. The "Jumble" Sizes - Repeating these creates the mosaic */
        .item-a { grid-column: span 2; grid-row: span 2; } /* Feature Large */
        .item-b { grid-row: span 2; }                    /* Tall Vertical */
        .item-c { grid-column: span 2; }                 /* Wide Horizontal */
        .item-d { grid-column: span 1; grid-row: span 1; } /* Standard Square */
        .item-e { grid-row: span 2; grid-column: span 1; } /* Tall Vertical 2 */

        /* 4. Hover Effects & Captions */
        .gallery-item:hover img { transform: scale(1.08); }
        
        .caption {
            position: absolute; bottom: 0; left: 0; width: 100%;
            background: linear-gradient(transparent, rgba(0,0,0,0.85));
            color: white; padding: 15px 10px; font-family: sans-serif;
            font-size: 0.85rem; opacity: 0; transition: 0.3s;
        }

        .gallery-item:hover .caption { opacity: 1; }

        /* Mobile Optimization */
        @media (max-width: 768px) {
            .gallery-container { grid-template-columns: repeat(2, 1fr); }
            .item-a, .item-c { grid-column: span 2; }
            .item-b, .item-e { grid-row: span 1; }
        }