/* Demo containers with flexbox applied */
.demo-default,
.demo-grow-equal,
.demo-grow-different,
.demo-shrink,
.demo-basis,
.demo-dashboard {
    display: flex;
    gap: 0.5rem;
}

.demo-shrink {
    width: 400px;
    /* Constrained width to show shrinking */
}


/* Flex grow variations */
.grow-1 {
    flex-grow: 1;
}

.grow-2 {
    flex-grow: 2;
}

.grow-3 {
    flex-grow: 3;
}

/* Flex shrink variations */
.shrink-0 {
    flex-shrink: 0;
    min-width: 200px;
}

.shrink-1 {
    flex-shrink: 1;
    min-width: 150px;
}

.shrink-3 {
    flex-shrink: 3;
    min-width: 150px;
}

/* Flex basis variations */
.basis-100 {
    flex-basis: 100px;
}

.basis-200 {
    flex-basis: 200px;
}

.basis-auto {
    flex-basis: auto;
}