/* row (flex wrapper) */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -16px;   /* gutter compensation */
	margin-right: -16px;
}

/* every column */
[class^="col-"], [class*=" col-"] {
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/* 12-column grid system */
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%; }

/* Responsive breakpoints (mimic Bootstrap sm/md/lg/xl) */
@media (max-width: 576px) {
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
	.col-sm-6  { flex: 0 0 50%;  max-width: 50%; }
}

@media (min-width: 768px) {
	.col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
	.col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; }
	.col-md-6  { flex: 0 0 50%;  max-width: 50%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
	.col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
	.col-lg-6  { flex: 0 0 50%;  max-width: 50%; }
	.col-lg-8  { flex: 0 0 66.666%; max-width: 66.666%; }
}

@media (min-width: 1200px) {
	.col-xl-3  { flex: 0 0 25%; max-width: 25%; }
	.col-xl-9  { flex: 0 0 75%; max-width: 75%; }
}

/* display */
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* flex direction */
.flex-row            { flex-direction: row !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column         { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

/* flex wrap */
.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

/* justify-content */
.justify-start    { justify-content: flex-start !important; }
.justify-end      { justify-content: flex-end !important; }
.justify-center   { justify-content: center !important; }
.justify-between  { justify-content: space-between !important; }
.justify-around   { justify-content: space-around !important; }
.justify-evenly   { justify-content: space-evenly !important; }

/* align-items */
.items-start     { align-items: flex-start !important; }
.items-end       { align-items: flex-end !important; }
.items-center    { align-items: center !important; }
.items-baseline  { align-items: baseline !important; }
.items-stretch   { align-items: stretch !important; }

/* align-self (per child) */
.self-start     { align-self: flex-start !important; }
.self-end       { align-self: flex-end !important; }
.self-center    { align-self: center !important; }
.self-baseline  { align-self: baseline !important; }
.self-stretch   { align-self: stretch !important; }

/* align-content (multi-line) */
.content-start    { align-content: flex-start !important; }
.content-end      { align-content: flex-end !important; }
.content-center   { align-content: center !important; }
.content-between  { align-content: space-between !important; }
.content-around   { align-content: space-around !important; }
.content-stretch  { align-content: stretch !important; }

/* flex grow/shrink/basis */
.flex-grow-0   { flex-grow: 0 !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-auto     { flex: 1 1 auto !important; }
.flex-none     { flex: none !important; }
.flex-1    { flex: 1 1 0 !important; }