.left {
	display: flex;
	margin-left: 0px;
}


/*
 [-] horizontal  [/] content  [/] left    [/]-pack    [ ]-fit
 [-] vertical    [/]-parent   [/] right   [/] grow    [ ] stretch
                              [/] top     [/] space
                              [/] bottom  [/] spread
                              [/]-center
*/

.horizontal, .vertical { display: flex; justify-content: center; align-items: center; width: auto; }
.horizontal { flex-direction: row; }
.vertical   { flex-direction: column; }
.horizontal > *, .vertical > * { margin: 0px; flex-grow: 0; }

.width-parent  { width: auto; }
.width-content { width: fit-content; }

.horizontal.child-left   { justify-content: flex-start; }
.horizontal.child-center { }
.horizontal.child-right  { justify-content: flex-end; }
.horizontal.child-top    { align-items: flex-start; }
.horizontal.child-bottom { align-items: flex-end; }
.vertical.child-left   { align-items: flex-start; }
.vertical.child-center { align-items: center; }
.vertical.child-right  { align-items: flex-end; }
.vertical.child-top    { justify-content: flex-start; }
.vertical.child-bottom { justify-content: flex-end; }

.horizontal.child-pack > * { flex-grow: 0; }
.horizontal.child-space    { justify-content: space-around; }
.horizontal.child-spread   { justify-content: space-between; }
.horizontal.child-grow > * { flex-grow: 1; }
.vertical.child-pack > * { flex-grow: 0; }
.vertical.child-space    { justify-content: space-around; }
.vertical.child-spread   { justify-content: space-between; }
.vertical.child-grow > * { flex-grow: 1; }

.horizontal.child-fit,     .vertical.child-fit     { }
.horizontal.child-stretch, .vertical.child-stretch { align-items: stretch; }


.horizontal {
	display: flex;
	flex-direction: row;
}
.vertical {
	display: flex;
	flex-direction: column;
}
.wrap {
	display: flex;
	flex-wrap: wrap;
}

[class*="gap"] { display: flex; gap: 10px; }
.gap-small  { gap: var(--small-space); }
.gap-medium { gap: var(--medium-space); }
.gap-big    { gap: var(--big-space); }

[class*="margin"] { margin: 0px; --margin-size: var(--small-space); }
.margin-small  { --margin-size: var(--small-space); }
.margin-medium { --margin-size: var(--medium-space); }
.margin-big    { --margin-size: var(--big-space); }
.margin { margin:   var(--margin-size); }
.margin-left   { margin-left:   var(--margin-size); }
.margin-right  { margin-right:  var(--margin-size); }
.margin-top    { margin-top:    var(--margin-size); }
.margin-bottom { margin-bottom: var(--margin-size); }