/* flex.css — flex-based “grid system” utilities */

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

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

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

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }

.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }
.no-shrink { flex-shrink: 0; }

/* Column utilities (12-col feel via percentages) */
.col-12 { width: 100%; }
.col-11 { width: 91.6667%; }
.col-10 { width: 83.3333%; }
.col-9  { width: 75%; }
.col-8  { width: 66.6667%; }
.col-7  { width: 58.3333%; }
.col-6  { width: 50%; }
.col-5  { width: 41.6667%; }
.col-4  { width: 33.3333%; }
.col-3  { width: 25%; }
.col-2  { width: 16.6667%; }
.col-1  { width: 8.3333%; }

/* Make columns behave nicely in flex wraps */
[class^="col-"] { flex: 0 0 auto; }

/* Responsive column utilities */
@media (min-width: 640px) {
  .sm\:col-6 { width: 50%; }
  .sm\:col-4 { width: 33.3333%; }
  .sm\:col-3 { width: 25%; }
}

@media (min-width: 900px) {
  .md\:col-4 { width: 33.3333%; }
  .md\:col-3 { width: 25%; }
  .md\:col-2 { width: 16.6667%; }
}