/* Flex utilities */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Grid utilities */
.grid {
  width: 100%;
}

.row.gap-16 { gap: 16px; }
.row.gap-32 { gap: 32px; }
.row.gap-0 { gap: 0; }

.rows-dir { flex-flow: nowrap; }
.rows-reverse { flex-flow: row-reverse; }

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

/* Self alignment helpers (for .col-* inside .row) */
.align-self-auto { align-self: auto }
.align-self-start { align-self: flex-start }
.align-self-center { align-self: center }
.align-self-end { align-self: flex-end }
.align-self-stretch { align-self: stretch }
.align-self-baseline { align-self: baseline }

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

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

/* Visibility helpers */
.hide { display: none }
.show { display: block }
.show-inline { display: inline }
.show-inline-block { display: inline-block }
.show-flex { display: flex }

/* Order helpers */
.order-0 { order: 0; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }
.order-first { order: -1; }
.order-last { order: 9999; }

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

@media (min-width: 992px) {
  .hide-xl { display: none }
  .show-xl { display: block }
  .show-xl-inline { display: inline }
  .show-xl-inline-block { display: inline-block }
  .show-xl-flex { display: flex }

  .order-xl-0 { order: 0; }
  .order-xl-1 { order: 1; }
  .order-xl-2 { order: 2; }
  .order-xl-3 { order: 3; }
  .order-xl-4 { order: 4; }
  .order-xl-5 { order: 5; }
  .order-xl-6 { order: 6; }
  .order-xl-7 { order: 7; }
  .order-xl-8 { order: 8; }
  .order-xl-9 { order: 9; }
  .order-xl-10 { order: 10; }
  .order-xl-11 { order: 11; }
  .order-xl-12 { order: 12; }
  .order-xl-first { order: -1; }
  .order-xl-last { order: 9999; }

  .align-self-xl-auto { align-self: auto }
  .align-self-xl-start { align-self: flex-start }
  .align-self-xl-center { align-self: center }
  .align-self-xl-end { align-self: flex-end }
  .align-self-xl-stretch { align-self: stretch }
  .align-self-xl-baseline { align-self: baseline }

  .rows-dir-xl { flex-flow: nowrap; }
  .rows-reverse-xl { flex-flow: row-reverse; }

  .col-xl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
  .hide-xxl { display: none }
  .show-xxl { display: block }
  .show-xxl-inline { display: inline }
  .show-xxl-inline-block { display: inline-block }
  .show-xxl-flex { display: flex }

  .order-xxl-0 { order: 0; }
  .order-xxl-1 { order: 1; }
  .order-xxl-2 { order: 2; }
  .order-xxl-3 { order: 3; }
  .order-xxl-4 { order: 4; }
  .order-xxl-5 { order: 5; }
  .order-xxl-6 { order: 6; }
  .order-xxl-7 { order: 7; }
  .order-xxl-8 { order: 8; }
  .order-xxl-9 { order: 9; }
  .order-xxl-10 { order: 10; }
  .order-xxl-11 { order: 11; }
  .order-xxl-12 { order: 12; }
  .order-xxl-first { order: -1; }
  .order-xxl-last { order: 9999; }

  .align-self-xxl-auto { align-self: auto }
  .align-self-xxl-start { align-self: flex-start }
  .align-self-xxl-center { align-self: center }
  .align-self-xxl-end { align-self: flex-end }
  .align-self-xxl-stretch { align-self: stretch }
  .align-self-xxl-baseline { align-self: baseline }

  .rows-dir-xxl { flex-flow: nowrap; }
  .rows-reverse-xxl { flex-flow: row-reverse; }

  .col-xxl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-xxl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xxl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xxl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xxl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xxl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xxl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xxl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1400px) {
  .hide-xxxl { display: none }
  .show-xxxl { display: block }
  .show-xxxl-inline { display: inline }
  .show-xxxl-inline-block { display: inline-block }
  .show-xxxl-flex { display: flex }

  .order-xxxl-0 { order: 0; }
  .order-xxxl-1 { order: 1; }
  .order-xxxl-2 { order: 2; }
  .order-xxxl-3 { order: 3; }
  .order-xxxl-4 { order: 4; }
  .order-xxxl-5 { order: 5; }
  .order-xxxl-6 { order: 6; }
  .order-xxxl-7 { order: 7; }
  .order-xxxl-8 { order: 8; }
  .order-xxxl-9 { order: 9; }
  .order-xxxl-10 { order: 10; }
  .order-xxxl-11 { order: 11; }
  .order-xxxl-12 { order: 12; }
  .order-xxxl-first { order: -1; }
  .order-xxxl-last { order: 9999; }

  .align-self-xxxl-auto { align-self: auto }
  .align-self-xxxl-start { align-self: flex-start }
  .align-self-xxxl-center { align-self: center }
  .align-self-xxxl-end { align-self: flex-end }
  .align-self-xxxl-stretch { align-self: stretch }
  .align-self-xxxl-baseline { align-self: baseline }

  .rows-dir-xxxl { flex-flow: nowrap; }
  .rows-reverse-xxxl { flex-flow: row-reverse; }

  .col-xxxl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-xxxl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xxxl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xxxl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xxxl-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-xxxl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xxxl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xxxl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-xxxl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xxxl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xxxl-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-xxxl-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
  .hide-lg { display: none }
  .show-lg { display: block }
  .show-lg-inline { display: inline }
  .show-lg-inline-block { display: inline-block }
  .show-lg-flex { display: flex }

  .order-lg-0 { order: 0; }
  .order-lg-1 { order: 1; }
  .order-lg-2 { order: 2; }
  .order-lg-3 { order: 3; }
  .order-lg-4 { order: 4; }
  .order-lg-5 { order: 5; }
  .order-lg-6 { order: 6; }
  .order-lg-7 { order: 7; }
  .order-lg-8 { order: 8; }
  .order-lg-9 { order: 9; }
  .order-lg-10 { order: 10; }
  .order-lg-11 { order: 11; }
  .order-lg-12 { order: 12; }
  .order-lg-first { order: -1; }
  .order-lg-last { order: 9999; }

  .align-self-lg-auto { align-self: auto }
  .align-self-lg-start { align-self: flex-start }
  .align-self-lg-center { align-self: center }
  .align-self-lg-end { align-self: flex-end }
  .align-self-lg-stretch { align-self: stretch }
  .align-self-lg-baseline { align-self: baseline }

  .rows-dir-lg { flex-flow: nowrap; }
  .rows-reverse-lg { flex-flow: row-reverse; }
  .column-lg { flex-flow: column; }
  .column-reverse-lg { flex-flow: column-reverse; }

  .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 720px) {
  .hide-md { display: none }
  .show-md { display: block }
  .show-md-inline { display: inline }
  .show-md-inline-block { display: inline-block }
  .show-md-flex { display: flex }

  .order-md-0 { order: 0; }
  .order-md-1 { order: 1; }
  .order-md-2 { order: 2; }
  .order-md-3 { order: 3; }
  .order-md-4 { order: 4; }
  .order-md-5 { order: 5; }
  .order-md-6 { order: 6; }
  .order-md-7 { order: 7; }
  .order-md-8 { order: 8; }
  .order-md-9 { order: 9; }
  .order-md-10 { order: 10; }
  .order-md-11 { order: 11; }
  .order-md-12 { order: 12; }
  .order-md-first { order: -1; }
  .order-md-last { order: 9999; }

  .align-self-md-auto { align-self: auto }
  .align-self-md-start { align-self: flex-start }
  .align-self-md-center { align-self: center }
  .align-self-md-end { align-self: flex-end }
  .align-self-md-stretch { align-self: stretch }
  .align-self-md-baseline { align-self: baseline }

  .rows-dir-md { flex-flow: nowrap; }
  .rows-reverse-md { flex-flow: row-reverse; }
  .column-md { flex-flow: column; }
  .column-reverse-md { flex-flow: column-reverse; }

  .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (max-width: 575.98px) {
  .hide-sm { display: none }
  .show-sm { display: block }
  .show-sm-inline { display: inline }
  .show-sm-inline-block { display: inline-block }
  .show-sm-flex { display: flex }

  .order-sm-0 { order: 0; }
  .order-sm-1 { order: 1; }
  .order-sm-2 { order: 2; }
  .order-sm-3 { order: 3; }
  .order-sm-4 { order: 4; }
  .order-sm-5 { order: 5; }
  .order-sm-6 { order: 6; }
  .order-sm-7 { order: 7; }
  .order-sm-8 { order: 8; }
  .order-sm-9 { order: 9; }
  .order-sm-10 { order: 10; }
  .order-sm-11 { order: 11; }
  .order-sm-12 { order: 12; }
  .order-sm-first { order: -1; }
  .order-sm-last { order: 9999; }

  .align-self-sm-auto { align-self: auto }
  .align-self-sm-start { align-self: flex-start }
  .align-self-sm-center { align-self: center }
  .align-self-sm-end { align-self: flex-end }
  .align-self-sm-stretch { align-self: stretch }
  .align-self-sm-baseline { align-self: baseline }

  .rows-dir-sm { flex-flow: nowrap; }
  .rows-reverse-sm { flex-flow: row-reverse; }

  .column-sm { flex-flow: column; }
  .column-reverse-sm { flex-flow: column-reverse; }
  .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-sm-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}