.wompum {
    &-container {
        width: 100%;
        margin: 0 auto;
    }

    &-grid,
    &-article-grid {
        display: grid;
        gap: 0;
        padding: 0;
        width: 100%;
    }

    // General grid styles
    &-grid {
        gap: 2px; // Tighter spacing for general grids
        
        &[data-rows="1"] {
            .wompum-cell {
                height: 100%;
            }
        }
    }

    // Article grid styles
    &-article-grid {
        gap: 3px; // Wider spacing for article grids

        .single-default &,
        .single-article & {
            gap: 1rem;
        }
    }

    &-cell {
        width: 100%;
        transition: background-color 0.3s ease;

        // Default background for uninitialized cells
        background-color: var(--sand-500);

        // Different styling for cells in article grids
        .wompum-article-grid & {
            &[data-section="narrator"] {
                min-height: 35px;
            }
            &[data-section="subject"] {
                min-height: 40px;
            }
            &[data-section="facilitator"] {
                min-height: 35px;
            }
        }

        // Fallback patterns using prime numbers
        // (these will be overridden by JS-generated colors when initialized)
        &:nth-child(7n+1) {
            background-color: var(--sand-100);
        }

        &:nth-child(5n+2) {
            background-color: var(--sand-900);
        }

        &:nth-child(11n+3) {
            background-color: var(--sand-500);
        }
    }
}