/* === FLEXBOX UTILITIES === */

/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

@media screen and (max-width: 768px) {
    .flex-mobile { /* Only flex on mobile */
        display: flex;
    }
}
@media screen and (min-width: 768px) {
    .flex-desktop { /* Only flex on desktop */
        display: flex;
    }
}

/* Responsive: Display on mobile */
@media (max-width: 768px) {
  .flex-mobile { display: flex; }
  .inline-mobile { display: inline; }
}

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* Gap (Desktop) */
.gap-1vw { gap: 1vw; }
.gap-2vw { gap: 2vw; }
.gap-2-5vw { gap: 2.5vw; }
.gap-3vw { gap: 3vw; }
.gap-4vw { gap: 4vw; }
.gap-5vw { gap: 5vw; }

/* Responsive: Gap on mobile */
@media (max-width: 768px) {
  .gap-1vw-mobile { gap: 1vw; }
  .gap-2vw-mobile { gap: 2vw; }
  .gap-2-5vw-mobile { gap: 2.5vw; }
  .gap-3vw-mobile { gap: 3vw; }
}

/* Align Items */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Align Self */
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* Flex Grow / Shrink / Basis */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Order */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }