/* Flex Direction Classes */
.flx-dir-row { flex-direction: row; }
.flx-dir-col { flex-direction: column; }
.flx-dir-row-rev { flex-direction: row-reverse; }
.flx-dir-col-rev { flex-direction: column-reverse; }

/* Flex Wrap Classes */
.flx-wrp-nwp { flex-wrap: nowrap; }
.flx-wrp-wrp { flex-wrap: wrap; }
.flx-wrp-rev { flex-wrap: wrap-reverse; }

/* Justify Content Classes */
.flx-jst-str { justify-content: flex-start; }
.flx-jst-end { justify-content: flex-end; }
.flx-jst-ctr { justify-content: center; }
.flx-jst-btw { justify-content: space-between; }
.flx-jst-ard { justify-content: space-around; }
.flx-jst-evn { justify-content: space-evenly; }

/* Align Items Classes */
.flx-aln-str { align-items: flex-start; }
.flx-aln-end { align-items: flex-end; }
.flx-aln-ctr { align-items: center; }
.flx-aln-bsl { align-items: baseline; }
.flx-aln-str { align-items: stretch; }

/* Align Content Classes */
.flx-cnt-str { align-content: flex-start; }
.flx-cnt-end { align-content: flex-end; }
.flx-cnt-ctr { align-content: center; }
.flx-cnt-btw { align-content: space-between; }
.flx-cnt-ard { align-content: space-around; }
.flx-cnt-str { align-content: stretch; }

/* Flex Grow Classes */
.flx-grw-0 { flex-grow: 0; }
.flx-grw-1 { flex-grow: 1; }

/* Flex Shrink Classes */
.flx-srk-0 { flex-shrink: 0; }
.flx-srk-1 { flex-shrink: 1; }

/* Flex Basis Classes */
.flx-bas-aut { flex-basis: auto; }
.flx-bas-0 { flex-basis: 0; }
.flx-bas-100 { flex-basis: 100%; }

/* Align Self Classes */
.flx-slf-str { align-self: flex-start; }
.flx-slf-end { align-self: flex-end; }
.flx-slf-ctr { align-self: center; }
.flx-slf-bsl { align-self: baseline; }
.flx-slf-str { align-self: stretch; }

@media screen and (max-width: 768px) {
    /* Mobile Flex Classes */
    .flx-mob-dir-col { flex-direction: column; }
    .flx-mob-dir-col-rev { flex-direction: column-reverse; }
    .flx-mob-dir-row { flex-direction: row; }
    .flx-mob-dir-row-rev { flex-direction: row-reverse; }

    /* Mobile Flex Wrap Classes */
    .flx-mob-wrp-nwp { flex-wrap: nowrap; }
    .flx-mob-wrp-wrp { flex-wrap: wrap; }
    .flx-mob-wrp-rev { flex-wrap: wrap-reverse; }
}

/* Mobile Image Classes */
.mob-img-min { max-width: 100%; }
.mob-img-ctr { margin: 0 auto; }
