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

        & .wompum-grid,
        & .wompum-article-grid {
            gap: 2px;
            height: 100%; // Fill container height
            min-height: 2px;
            grid-template-rows: repeat(var(--grid-rows, 5), 1fr); // Default 5 rows
        }

        // When no height is set, use aspect ratio
        &--aspect-ratio {
            aspect-ratio: 3/1;
        }

        &--wide-gap .wompum-grid,
        &--wide-gap .wompum-article-grid {
            gap: 1rem;
        }

        &--no-gap .wompum-grid,
        &--no-gap .wompum-article-grid {
            gap: 0;
        }
    }

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

    &-cell {
        width: 100%;
        height: 100%; // Ensure cells fill their grid areas
        transition: background-color 0.3s ease;
        background-color: var(--sand-500);

        // Remove fixed heights since we're using aspect ratio now
        &--narrator,
        &--subject,
        &--facilitator {
            min-height: unset;
        }
    }
}