.flx {
    display: flex;
    flex: 1;
    flex-grow: 1;
    width: 100%;
}



.flx-col {
    flex-direction: column;
}

.flx-row {
    flex-direction: row;
}


.flx-u-1 {
    flex-grow: 1;
}

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

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

.flx-u-4 {
    flex-grow: 4;
}

.flx-u-5 {
    flex-grow: 5;
}

.flx-u-6 {
    flex-grow: 6;
}


.gap-1 {
    gap: 1em;
}

/* 
.flx-basis-1-1 {
    flex-basis: calc(1/1 * 100%);
}

.flx-basis-1-2 {
    flex-basis: calc(1/2 * 100%);
}


.flx-basis-1-3 {
    flex-basis: calc(1/3 * 100%);
}

.flx-basis-2-3 {
    flex-basis: calc(2/3 * 100%);
}


.flx-basis-1-4 {
    flex-basis: calc(1/3 * 100%);
}

.flx-basis-3-4 {
    flex-basis: calc(3/4 * 100%);
}


.flx-basis-1-4 {
    flex-basis: calc(1/3 * 100%);
}

.flx-basis-3-4 {
    flex-basis: calc(3/4 * 100%);
}

.flx-grow {
    flex-grow: 1;
} */