.flex { display: flex; }
.flex--inline { display: inline-flex; }

.flex--gap-inherit { gap: inherit; }
.flex--gap-quarter { gap: calc(var(--hs-spacing-base) * 0.25); }
.flex--gap-half { gap: calc(var(--hs-spacing-base) * 0.5); }
.flex--gap-1 { gap: calc(var(--hs-spacing-base) * 1); }
.flex--gap-2 { gap: calc(var(--hs-spacing-base) * 2); }
.flex--gap-3 { gap: calc(var(--hs-spacing-base) * 3); }
.flex--gap-4 { gap: calc(var(--hs-spacing-base) * 4); }
.flex--gap-5 { gap: calc(var(--hs-spacing-base) * 5); }
.flex--gap-6 { gap: calc(var(--hs-spacing-base) * 6); }
.flex--gap-7 { gap: calc(var(--hs-spacing-base) * 7); }
.flex--gap-8 { gap: calc(var(--hs-spacing-base) * 8); }
.flex--gap-9 { gap: calc(var(--hs-spacing-base) * 9); }
.flex--gap-10 { gap: calc(var(--hs-spacing-base) * 10); }
.flex--gap-11 { gap: calc(var(--hs-spacing-base) * 11); }
.flex--gap-12 { gap: calc(var(--hs-spacing-base) * 12); }

.flex--wrap-wrap { flex-wrap: wrap; }
.flex--wrap-wrap-reverse { flex-wrap: wrap-reverse; }
.flex--wrap-nowrap { flex-wrap: nowrap; }

.flex--direction-row { flex-direction: row; }
.flex--direction-row-reverse { flex-direction: row-reverse; }
.flex--direction-column { flex-direction: column; }
.flex--direction-column-reverse { flex-direction: column-reverse; }

.flex--align-items-normal { align-items: normal; }
.flex--align-items-start { align-items: flex-start; }
.flex--align-items-end { align-items: flex-end; }
.flex--align-items-center { align-items: center; }
.flex--align-items-stretch { align-items: stretch; }
.flex--align-items-baseline { align-items: baseline; }

.flex--justify-content-normal { justify-content: normal; }
.flex--justify-content-start { justify-content: flex-start; }
.flex--justify-content-end { justify-content: flex-end; }
.flex--justify-content-center { justify-content: center; }
.flex--justify-content-baseline { justify-content: baseline; }
.flex--justify-content-space-between { justify-content: space-between; }
.flex--justify-content-space-around { justify-content: space-around; }
.flex--justify-content-space-evenly { justify-content: space-evenly; }