/* Base flex container style */

.mmal-flex-container-flex > div {
  display: flex;
}

/* Flex Direction */

.mmal-flex-container-flex-row > div {
  flex-direction: row;
}

.mmal-flex-container-flex-row-reverse > div {
  flex-direction: row-reverse;
}

.mmal-flex-container-flex-column > div {
  flex-direction: column;
}

.mmal-flex-container-flex-column-reverse > div {
  flex-direction: column-reverse;
}

/* Justify Content */

.mmal-flex-container-justify-content-start > div {
  justify-content: flex-start;
}

.mmal-flex-container-justify-content-end > div {
  justify-content: flex-end;
}

.mmal-flex-container-justify-content-center > div {
  justify-content: center;
}

.mmal-flex-container-justify-content-between > div {
  justify-content: space-between;
}

.mmal-flex-container-justify-content-around > div {
  justify-content: space-around;
}

/* Align Items */

.mmal-flex-container-align-items-start > div {
  align-items: flex-start;
}

.mmal-flex-container-align-items-end > div {
  align-items: flex-end;
}

.mmal-flex-container-align-items-center > div {
  align-items: center;
}

.mmal-flex-container-align-items-stretch > div {
  align-items: stretch;
}

.mmal-flex-container-align-items-baseline > div {
  align-items: baseline;
}

/* Flex Wrap */

.mmal-flex-container-flex-nowrap > div {
  flex-wrap: nowrap;
}

.mmal-flex-container-flex-wrap > div {
  flex-wrap: wrap;
}

.mmal-flex-container-flex-wrap-reverse > div {
  flex-wrap: wrap-reverse;
}

/* Row Gap */

.mmal-flex-container-gap-y-0 > div {
  row-gap: 0; /* 0px */
}

.mmal-flex-container-gap-y-px > div {
  row-gap: 0.0625rem; /* 1px */
}

.mmal-flex-container-gap-y-0-5 > div {
  row-gap: 0.125rem; /* 2px */
}

.mmal-flex-container-gap-y-1 > div {
  row-gap: 0.25rem; /* 4px */
}

.mmal-flex-container-gap-y-1-5 > div {
  row-gap: 0.375rem; /* 6px */
}

.mmal-flex-container-gap-y-2 > div {
  row-gap: 0.5rem; /* 8px */
}

.mmal-flex-container-gap-y-2-5 > div {
  row-gap: 0.625rem; /* 10px */
}

.mmal-flex-container-gap-y-3 > div {
  row-gap: 0.75rem; /* 12px */
}

.mmal-flex-container-gap-y-3-5 > div {
  row-gap: 0.875rem; /* 14px */
}

.mmal-flex-container-gap-y-4 > div {
  row-gap: 1rem; /* 16px */
}

.mmal-flex-container-gap-y-5 > div {
  row-gap: 1.25rem; /* 20px */
}

.mmal-flex-container-gap-y-6 > div {
  row-gap: 1.5rem; /* 24px */
}

.mmal-flex-container-gap-y-7 > div {
  row-gap: 1.75rem; /* 28px */
}

.mmal-flex-container-gap-y-8 > div {
  row-gap: 2rem; /* 32px */
}

.mmal-flex-container-gap-y-9 > div {
  row-gap: 2.25rem; /* 36px */
}
.mmal-flex-container-gap-y-10 > div {
  row-gap: 2.5rem; /* 40px */
}

.mmal-flex-container-gap-y-11 > div {
  row-gap: 2.75rem; /* 44px */
}

.mmal-flex-container-gap-y-12 > div {
  row-gap: 3rem; /* 48px */
}

.mmal-flex-container-gap-y-13 > div {
  row-gap: 3.25rem; /* 52px */
}

.mmal-flex-container-gap-y-14 > div {
  row-gap: 3.5rem; /* 56px */
}

.mmal-flex-container-gap-y-15 > div {
  row-gap: 3.75rem; /* 60px */
}

.mmal-flex-container-gap-y-16 > div {
  row-gap: 4rem; /* 64px */
}

.mmal-flex-container-gap-y-20 > div {
  row-gap: 5rem; /* 80px */
}

.mmal-flex-container-gap-y-24 > div {
  row-gap: 6rem; /* 96px */
}

.mmal-flex-container-gap-y-28 > div {
  row-gap: 7rem; /* 112px */
}

.mmal-flex-container-gap-y-32 > div {
  row-gap: 8rem; /* 128px */
}

.mmal-flex-container-gap-y-36 > div {
  row-gap: 9rem; /* 144px */
}

.mmal-flex-container-gap-y-40 > div {
  row-gap: 10rem; /* 160px */
}

.mmal-flex-container-gap-y-44 > div {
  row-gap: 11rem; /* 176px */
}

.mmal-flex-container-gap-y-48 > div {
  row-gap: 12rem; /* 192px */
}
.mmal-flex-container-gap-y-52 > div {
  row-gap: 13rem; /* 208px */
}
.mmal-flex-container-gap-y-56 > div {
  row-gap: 14rem; /* 224px */
}

.mmal-flex-container-gap-y-60 > div {
  row-gap: 15rem; /* 240px */
}

.mmal-flex-container-gap-y-64 > div {
  row-gap: 16rem; /* 256px */
}

.mmal-flex-container-gap-y-72 > div {
  row-gap: 18rem; /* 288px */
}

.mmal-flex-container-gap-y-80 > div {
  row-gap: 20rem; /* 320px */
}

.mmal-flex-container-gap-y-96 > div {
  row-gap: 24rem; /* 384px */
}

/* Column Gap */

.mmal-flex-container-gap-x-0 > div {
  column-gap: 0; /* 0px */
}

.mmal-flex-container-gap-x-px > div {
  column-gap: 0.0625rem; /* 1px */
}

.mmal-flex-container-gap-x-0-5 > div {
  column-gap: 0.125rem; /* 2px */
}

.mmal-flex-container-gap-x-1 > div {
  column-gap: 0.25rem; /* 4px */
}

.mmal-flex-container-gap-x-1-5 > div {
  column-gap: 0.375rem; /* 6px */
}

.mmal-flex-container-gap-x-2 > div {
  column-gap: 0.5rem; /* 8px */
}

.mmal-flex-container-gap-x-2-5 > div {
  column-gap: 0.625rem; /* 10px */
}

.mmal-flex-container-gap-x-3 > div {
  column-gap: 0.75rem; /* 12px */
}

.mmal-flex-container-gap-x-3-5 > div {
  column-gap: 0.875rem; /* 14px */
}

.mmal-flex-container-gap-x-4 > div {
  column-gap: 1rem; /* 16px */
}

.mmal-flex-container-gap-x-5 > div {
  column-gap: 1.25rem; /* 20px */
}

.mmal-flex-container-gap-x-6 > div {
  column-gap: 1.5rem; /* 24px */
}

.mmal-flex-container-gap-x-7 > div {
  column-gap: 1.75rem; /* 28px */
}

.mmal-flex-container-gap-x-8 > div {
  column-gap: 2rem; /* 32px */
}

.mmal-flex-container-gap-x-9 > div {
  column-gap: 2.25rem; /* 36px */
}

.mmal-flex-container-gap-x-10 > div {
  column-gap: 2.5rem; /* 40px */
}

.mmal-flex-container-gap-x-11 > div {
  column-gap: 2.75rem; /* 44px */
}

.mmal-flex-container-gap-x-12 > div {
  column-gap: 3rem; /* 48px */
}

.mmal-flex-container-gap-x-13 > div {
  column-gap: 3.25rem; /* 52px */
}

.mmal-flex-container-gap-x-14 > div {
  column-gap: 3.5rem; /* 56px */
}

.mmal-flex-container-gap-x-15 > div {
  column-gap: 3.75rem; /* 60px */
}

.mmal-flex-container-gap-x-16 > div {
  column-gap: 4rem; /* 64px */
}

.mmal-flex-container-gap-x-20 > div {
  column-gap: 5rem; /* 80px */
}

.mmal-flex-container-gap-x-24 > div {
  column-gap: 6rem; /* 96px */
}

.mmal-flex-container-gap-x-28 > div {
  column-gap: 7rem; /* 112px */
}

.mmal-flex-container-gap-x-32 > div {
  column-gap: 8rem; /* 128px */
}

.mmal-flex-container-gap-x-36 > div {
  column-gap: 9rem; /* 144px */
}

.mmal-flex-container-gap-x-40 > div {
  column-gap: 10rem; /* 160px */
}

.mmal-flex-container-gap-x-44 > div {
  column-gap: 11rem; /* 176px */
}

.mmal-flex-container-gap-x-48 > div {
  column-gap: 12rem; /* 192px */
}

.mmal-flex-container-gap-x-52 > div {
  column-gap: 13rem; /* 208px */
}

.mmal-flex-container-gap-x-56 > div {
  column-gap: 14rem; /* 224px */
}

.mmal-flex-container-gap-x-60 > div {
  column-gap: 15rem; /* 240px */
}

.mmal-flex-container-gap-x-64 > div {
  column-gap: 16rem; /* 256px */
}

.mmal-flex-container-gap-x-72 > div {
  column-gap: 18rem; /* 288px */
}

.mmal-flex-container-gap-x-80 > div {
  column-gap: 20rem; /* 320px */
}

.mmal-flex-container-gap-x-96 > div {
  column-gap: 24rem; /* 384px */
}