/* pb-container steuert Flex, pb-baseblock ist das Flex-Element */
.pb-container > .pb-baseblock {
    display: flex;
}

/* Richtung */
.pb-flex-dir-row > .pb-baseblock {
    flex-direction: row;
}
.pb-flex-dir-column > .pb-baseblock {
    flex-direction: column;
}

/* justify-content */
.pb-flex-justify-start > .pb-baseblock {
    justify-content: flex-start;
}
.pb-flex-justify-center > .pb-baseblock {
    justify-content: center;
}
.pb-flex-justify-end > .pb-baseblock {
    justify-content: flex-end;
}
.pb-flex-justify-between > .pb-baseblock {
    justify-content: space-between;
}
.pb-flex-justify-around > .pb-baseblock {
    justify-content: space-around;
}
.pb-flex-justify-evenly > .pb-baseblock {
    justify-content: space-evenly;
}

/* align-items */
.pb-flex-align-stretch > .pb-baseblock {
    align-items: stretch;
}
.pb-flex-align-start > .pb-baseblock {
    align-items: flex-start;
}
.pb-flex-align-center > .pb-baseblock {
    align-items: center;
}
.pb-flex-align-end > .pb-baseblock {
    align-items: flex-end;
}
.pb-flex-align-baseline > .pb-baseblock {
    align-items: baseline;
}

/* gap */
.pb-flex-gap-0 > .pb-baseblock { gap: 0; }
.pb-flex-gap-1 > .pb-baseblock { gap: .25rem; }
.pb-flex-gap-2 > .pb-baseblock { gap: .5rem; }
.pb-flex-gap-3 > .pb-baseblock { gap: 1rem; }
.pb-flex-gap-4 > .pb-baseblock { gap: 1.5rem; }