/*
 * grid.css — Sistema de Grid FLEXUS (refactorizado)
 *
 * Derivado de flexus.css, corregido y modernizado.
 * Errores de sintaxis corregidos: líneas 878, 920, 933, 2000-2001 del original.
 * Duplicaciones eliminadas. Prefijos IE11 removidos. Gutters con gap.
 *
 * ─────────────────────────────────────────────────────────────
 * BREAKPOINTS
 *   xl   min-width: 1400px  (desktop grande)
 *   lg   max-width: 1199px  (desktop normal)
 *   md   max-width: 991px   (tablet)
 *   sm   max-width: 767px   (móvil landscape)
 *   xs   max-width: 575px   (móvil portrait)
 *
 * USO RÁPIDO
 *   Contenedor principal:   <div class="flex-body">
 *   Cuerpo centrado:        <div class="flex-main">
 *   Grid de 3 columnas:     <div class="flex-3">  (todos los hijos → 33%)
 *   Grid responsive:        <div class="flex-3 flex-sm-1">
 *   Fracciones:             <div class="flex-2-3">  (66.66%)
 *   Ancho fijo:             <div class="flex-x-300">  (300px = 18.75rem)
 *   Gap entre hijos:        <div class="flex-3 gap-16">
 *   Columna a pantalla:     <div class="flex-md-column">
 * ─────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   CONTENEDORES
   ══════════════════════════════════════════════════════════════ */

.flex-body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-between;
  min-height: 100%;
  height: 100%;
  border: none;
}

.flex-main {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 78.13rem;
  max-width: 78.13rem;
  align-items: flex-start;
  align-content: flex-start;
  overflow: auto;
  box-sizing: border-box;
  min-height: 100%;
  border: none;
}

.flex-container {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1300px;
  padding-right: 15px;
  padding-left: 15px;
}

/* ══════════════════════════════════════════════════════════════
   DIRECCIÓN Y WRAP
   ══════════════════════════════════════════════════════════════ */

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

.column > * {
  width: 100%;
  box-sizing: border-box;
}

.column {
  box-sizing: border-box;
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

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

/* .flex-row unificada (era duplicado en el original) */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row !important;
}

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

/* ══════════════════════════════════════════════════════════════
   FLEX GROW / SHRINK — atributo selector (sin breakpoint)
   Uso: class="flex-1-1-auto" aplica flex:1 1 auto
   ══════════════════════════════════════════════════════════════ */

[class*="flex-0-1"] {
  flex: 0 1;
  box-sizing: border-box;
}

[class*="flex-1-1"] {
  flex: 1 1;
  max-width: none !important;
}

[class*="flex-1-0"] {
  flex: 1 0;
}

[class*="flex-auto"] {
  flex: 1 1 0%;
}

[class*="flex-0-1-auto"] {
  flex: 0 1 auto;
}

[class*="flex-2-1"] {
  flex: 2 1;
}

[class*="flex-2-0"] {
  flex: 2 0;
}

[class*="flex-3-1"] {
  flex: 3 1;
}

[class*="flex-3-0"] {
  flex: 3 0;
}

[class*="flex-4-1"] {
  flex: 4 1;
}

[class*="flex-4-0"] {
  flex: 4 0;
}

[class*="flex-5-1"] {
  flex: 5 1;
}

[class*="flex-5-0"] {
  flex: 5 0;
}

/* ══════════════════════════════════════════════════════════════
   DIMENSIONES FIJAS EN REM
   Uso: class="flex-1-1-500" → base fija de 31.25rem, crece con el grow/shrink
   Escala: 10–100 de 10 en 10 · 100–1300 de 25 en 25 (58 valores)
   Orden ascendente obligatorio: resuelve conflictos de substring
   (ej. "-10" es substring de "-100" y "-1025"; al ir antes, los valores
   mayores siempre lo sobreescriben en cascada)
   Formato: flex-basis individual — NO usar flex shorthand aquí porque
   el shorthand sobreescribiría el grow/shrink fijado por [class*="flex-1-1"]
   ══════════════════════════════════════════════════════════════ */

/* ── 10–100 (saltos de 10) ──────────────────────────────────── */
[class*="flex-"][class*="-10"]   { flex-basis:  0.625rem; max-width:  0.625rem; width:  0.625rem; }
[class*="flex-"][class*="-20"]   { flex-basis:   1.25rem; max-width:   1.25rem; width:   1.25rem; }
[class*="flex-"][class*="-30"]   { flex-basis:  1.875rem; max-width:  1.875rem; width:  1.875rem; }
[class*="flex-"][class*="-40"]   { flex-basis:    2.5rem; max-width:    2.5rem; width:    2.5rem; }
[class*="flex-"][class*="-50"]   { flex-basis:  3.125rem; max-width:  3.125rem; width:  3.125rem; }
[class*="flex-"][class*="-60"]   { flex-basis:   3.75rem; max-width:   3.75rem; width:   3.75rem; }
[class*="flex-"][class*="-70"]   { flex-basis:  4.375rem; max-width:  4.375rem; width:  4.375rem; }
[class*="flex-"][class*="-80"]   { flex-basis:      5rem; max-width:      5rem; width:      5rem; }
[class*="flex-"][class*="-90"]   { flex-basis:  5.625rem; max-width:  5.625rem; width:  5.625rem; }
[class*="flex-"][class*="-100"]  { flex-basis:   6.25rem; max-width:   6.25rem; width:   6.25rem; }

/* ── 125–975 (saltos de 25) ─────────────────────────────────── */
[class*="flex-"][class*="-125"]  { flex-basis: 7.8125rem; max-width: 7.8125rem; width: 7.8125rem; }
[class*="flex-"][class*="-150"]  { flex-basis:  9.375rem; max-width:  9.375rem; width:  9.375rem; }
[class*="flex-"][class*="-175"]  { flex-basis: 10.9375rem; max-width: 10.9375rem; width: 10.9375rem; }
[class*="flex-"][class*="-200"]  { flex-basis:   12.5rem; max-width:   12.5rem; width:   12.5rem; }
[class*="flex-"][class*="-225"]  { flex-basis: 14.0625rem; max-width: 14.0625rem; width: 14.0625rem; }
[class*="flex-"][class*="-250"]  { flex-basis:  15.625rem; max-width:  15.625rem; width:  15.625rem; }
[class*="flex-"][class*="-275"]  { flex-basis: 17.1875rem; max-width: 17.1875rem; width: 17.1875rem; }
[class*="flex-"][class*="-300"]  { flex-basis:  18.75rem; max-width:  18.75rem; width:  18.75rem; }
[class*="flex-"][class*="-325"]  { flex-basis: 20.3125rem; max-width: 20.3125rem; width: 20.3125rem; }
[class*="flex-"][class*="-350"]  { flex-basis:  21.875rem; max-width:  21.875rem; width:  21.875rem; }
[class*="flex-"][class*="-375"]  { flex-basis: 23.4375rem; max-width: 23.4375rem; width: 23.4375rem; }
[class*="flex-"][class*="-400"]  { flex-basis:     25rem; max-width:     25rem; width:     25rem; }
[class*="flex-"][class*="-425"]  { flex-basis: 26.5625rem; max-width: 26.5625rem; width: 26.5625rem; }
[class*="flex-"][class*="-450"]  { flex-basis:  28.125rem; max-width:  28.125rem; width:  28.125rem; }
[class*="flex-"][class*="-475"]  { flex-basis: 29.6875rem; max-width: 29.6875rem; width: 29.6875rem; }
[class*="flex-"][class*="-500"]  { flex-basis:  31.25rem; max-width:  31.25rem; width:  31.25rem; }
[class*="flex-"][class*="-525"]  { flex-basis: 32.8125rem; max-width: 32.8125rem; width: 32.8125rem; }
[class*="flex-"][class*="-550"]  { flex-basis:  34.375rem; max-width:  34.375rem; width:  34.375rem; }
[class*="flex-"][class*="-575"]  { flex-basis: 35.9375rem; max-width: 35.9375rem; width: 35.9375rem; }
[class*="flex-"][class*="-600"]  { flex-basis:   37.5rem; max-width:   37.5rem; width:   37.5rem; }
[class*="flex-"][class*="-625"]  { flex-basis: 39.0625rem; max-width: 39.0625rem; width: 39.0625rem; }
[class*="flex-"][class*="-650"]  { flex-basis:  40.625rem; max-width:  40.625rem; width:  40.625rem; }
[class*="flex-"][class*="-675"]  { flex-basis: 42.1875rem; max-width: 42.1875rem; width: 42.1875rem; }
[class*="flex-"][class*="-700"]  { flex-basis:  43.75rem; max-width:  43.75rem; width:  43.75rem; }
[class*="flex-"][class*="-725"]  { flex-basis: 45.3125rem; max-width: 45.3125rem; width: 45.3125rem; }
[class*="flex-"][class*="-750"]  { flex-basis:  46.875rem; max-width:  46.875rem; width:  46.875rem; }
[class*="flex-"][class*="-775"]  { flex-basis: 48.4375rem; max-width: 48.4375rem; width: 48.4375rem; }
[class*="flex-"][class*="-800"]  { flex-basis:     50rem; max-width:     50rem; width:     50rem; }
[class*="flex-"][class*="-825"]  { flex-basis: 51.5625rem; max-width: 51.5625rem; width: 51.5625rem; }
[class*="flex-"][class*="-850"]  { flex-basis:  53.125rem; max-width:  53.125rem; width:  53.125rem; }
[class*="flex-"][class*="-875"]  { flex-basis: 54.6875rem; max-width: 54.6875rem; width: 54.6875rem; }
[class*="flex-"][class*="-900"]  { flex-basis:  56.25rem; max-width:  56.25rem; width:  56.25rem; }
[class*="flex-"][class*="-925"]  { flex-basis: 57.8125rem; max-width: 57.8125rem; width: 57.8125rem; }
[class*="flex-"][class*="-950"]  { flex-basis:  59.375rem; max-width:  59.375rem; width:  59.375rem; }
[class*="flex-"][class*="-975"]  { flex-basis: 60.9375rem; max-width: 60.9375rem; width: 60.9375rem; }

/* ── 1000–1300 (saltos de 25) ───────────────────────────────── */
[class*="flex-"][class*="-1000"] { flex-basis:   62.5rem; max-width:   62.5rem; width:   62.5rem; }
[class*="flex-"][class*="-1025"] { flex-basis: 64.0625rem; max-width: 64.0625rem; width: 64.0625rem; }
[class*="flex-"][class*="-1050"] { flex-basis:  65.625rem; max-width:  65.625rem; width:  65.625rem; }
[class*="flex-"][class*="-1075"] { flex-basis: 67.1875rem; max-width: 67.1875rem; width: 67.1875rem; }
[class*="flex-"][class*="-1100"] { flex-basis:  68.75rem; max-width:  68.75rem; width:  68.75rem; }
[class*="flex-"][class*="-1125"] { flex-basis: 70.3125rem; max-width: 70.3125rem; width: 70.3125rem; }
[class*="flex-"][class*="-1150"] { flex-basis:  71.875rem; max-width:  71.875rem; width:  71.875rem; }
[class*="flex-"][class*="-1175"] { flex-basis: 73.4375rem; max-width: 73.4375rem; width: 73.4375rem; }
[class*="flex-"][class*="-1200"] { flex-basis:     75rem; max-width:     75rem; width:     75rem; }
[class*="flex-"][class*="-1225"] { flex-basis: 76.5625rem; max-width: 76.5625rem; width: 76.5625rem; }
[class*="flex-"][class*="-1250"] { flex-basis:  78.125rem; max-width:  78.125rem; width:  78.125rem; }
[class*="flex-"][class*="-1275"] { flex-basis: 79.6875rem; max-width: 79.6875rem; width: 79.6875rem; }
[class*="flex-"][class*="-1300"] { flex-basis:  81.25rem; max-width:  81.25rem; width:  81.25rem; }

/* ══════════════════════════════════════════════════════════════
   COLUMNAS — PATRÓN PADRE-CONTROLA-HIJOS
   Uso: <div class="flex-3"> → cada hijo ocupa 33.33%
   ══════════════════════════════════════════════════════════════ */

.flex-1  > * { flex-basis: 100%;      max-width: 100%;      width: 100%; }
.flex-2  > * { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-3  > * { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.flex-4  > * { flex-basis: 25%;       max-width: 25%;       width: 25%; }
.flex-5  > * { flex-basis: 20%;       max-width: 20%;       width: 20%; }
.flex-6  > * { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.flex-7  > * { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
.flex-8  > * { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
.flex-9  > * { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
.flex-10 > * { flex-basis: 10%;       max-width: 10%;       width: 10%; }
.flex-11 > * { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
.flex-12 > * { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }

/* ══════════════════════════════════════════════════════════════
   FRACCIONES INDIVIDUALES
   Uso: <div class="flex-2-3"> → ocupa 2/3 del contenedor
   Nota: min-width eliminado (rompía responsive en móvil)
   ══════════════════════════════════════════════════════════════ */

.flex-1-1  { flex-basis: 100%;      max-width: 100%;      width: 100%; }
.flex-1-2  { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-1-3  { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.flex-2-3  { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.flex-1-4  { flex-basis: 25%;       max-width: 25%;       width: 25%; }
.flex-2-4  { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-3-4  { flex-basis: 75%;       max-width: 75%;       width: 75%; }
.flex-1-5  { flex-basis: 20%;       max-width: 20%;       width: 20%; }
.flex-2-5  { flex-basis: 40%;       max-width: 40%;       width: 40%; }
.flex-3-5  { flex-basis: 60%;       max-width: 60%;       width: 60%; }
.flex-4-5  { flex-basis: 80%;       max-width: 80%;       width: 80%; }
.flex-1-6  { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.flex-2-6  { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.flex-3-6  { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-4-6  { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.flex-5-6  { flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.flex-1-7  { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
.flex-2-7  { flex-basis: 28.57143%; max-width: 28.57143%; width: 28.57143%; }
.flex-3-7  { flex-basis: 42.85714%; max-width: 42.85714%; width: 42.85714%; }
.flex-4-7  { flex-basis: 57.14286%; max-width: 57.14286%; width: 57.14286%; }
.flex-5-7  { flex-basis: 71.42857%; max-width: 71.42857%; width: 71.42857%; }
.flex-6-7  { flex-basis: 85.71429%; max-width: 85.71429%; width: 85.71429%; }
.flex-1-8  { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
.flex-2-8  { flex-basis: 25%;       max-width: 25%;       width: 25%; }
.flex-3-8  { flex-basis: 37.5%;     max-width: 37.5%;     width: 37.5%; }
.flex-4-8  { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-5-8  { flex-basis: 62.5%;     max-width: 62.5%;     width: 62.5%; }
.flex-6-8  { flex-basis: 75%;       max-width: 75%;       width: 75%; }
.flex-7-8  { flex-basis: 87.5%;     max-width: 87.5%;     width: 87.5%; }
.flex-1-9  { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
.flex-2-9  { flex-basis: 22.22222%; max-width: 22.22222%; width: 22.22222%; }
.flex-3-9  { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.flex-4-9  { flex-basis: 44.44444%; max-width: 44.44444%; width: 44.44444%; }
.flex-5-9  { flex-basis: 55.55556%; max-width: 55.55556%; width: 55.55556%; }
.flex-6-9  { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.flex-7-9  { flex-basis: 77.77778%; max-width: 77.77778%; width: 77.77778%; }
.flex-8-9  { flex-basis: 88.88889%; max-width: 88.88889%; width: 88.88889%; }
.flex-1-10 { flex-basis: 10%;       max-width: 10%;       width: 10%; }
.flex-2-10 { flex-basis: 20%;       max-width: 20%;       width: 20%; }
.flex-3-10 { flex-basis: 30%;       max-width: 30%;       width: 30%; }
.flex-4-10 { flex-basis: 40%;       max-width: 40%;       width: 40%; }
.flex-5-10 { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-6-10 { flex-basis: 60%;       max-width: 60%;       width: 60%; }
.flex-7-10 { flex-basis: 70%;       max-width: 70%;       width: 70%; }
.flex-8-10 { flex-basis: 80%;       max-width: 80%;       width: 80%; }
.flex-9-10 { flex-basis: 90%;       max-width: 90%;       width: 90%; }
.flex-1-11 { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
.flex-2-11 { flex-basis: 18.18182%; max-width: 18.18182%; width: 18.18182%; }
.flex-3-11 { flex-basis: 27.27273%; max-width: 27.27273%; width: 27.27273%; }
.flex-4-11 { flex-basis: 36.36364%; max-width: 36.36364%; width: 36.36364%; }
.flex-5-11 { flex-basis: 45.45455%; max-width: 45.45455%; width: 45.45455%; }
.flex-6-11 { flex-basis: 54.54545%; max-width: 54.54545%; width: 54.54545%; }
.flex-7-11 { flex-basis: 63.63636%; max-width: 63.63636%; width: 63.63636%; }
.flex-8-11 { flex-basis: 72.72727%; max-width: 72.72727%; width: 72.72727%; }
.flex-9-11 { flex-basis: 81.81818%; max-width: 81.81818%; width: 81.81818%; }
.flex-10-11{ flex-basis: 90.90909%; max-width: 90.90909%; width: 90.90909%; }
.flex-1-12 { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }
.flex-2-12 { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
.flex-3-12 { flex-basis: 25%;       max-width: 25%;       width: 25%; }
.flex-4-12 { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
.flex-5-12 { flex-basis: 41.66667%; max-width: 41.66667%; width: 41.66667%; }
.flex-6-12 { flex-basis: 50%;       max-width: 50%;       width: 50%; }
.flex-7-12 { flex-basis: 58.33333%; max-width: 58.33333%; width: 58.33333%; }
.flex-8-12 { flex-basis: 66.66667%; max-width: 66.66667%; width: 66.66667%; }
.flex-9-12 { flex-basis: 75%;       max-width: 75%;       width: 75%; }
.flex-10-12{ flex-basis: 83.33333%; max-width: 83.33333%; width: 83.33333%; }
.flex-11-12{ flex-basis: 91.66667%; max-width: 91.66667%; width: 91.66667%; }

/* ══════════════════════════════════════════════════════════════
   GAP — reemplaza el hack de margen negativo original
   Uso: <div class="flex-4 gap-16">
   ══════════════════════════════════════════════════════════════ */

.gap-0  { gap: 0; }
.gap-4  { gap: 0.25rem; }
.gap-8  { gap: 0.5rem; }
.gap-16 { gap: 1rem; }
.gap-24 { gap: 1.5rem; }
.gap-32 { gap: 2rem; }
.gap-40 { gap: 2.5rem; }

.col-gap-0  { column-gap: 0; }
.col-gap-8  { column-gap: 0.5rem; }
.col-gap-16 { column-gap: 1rem; }
.col-gap-24 { column-gap: 1.5rem; }
.col-gap-40 { column-gap: 2.5rem; }

.row-gap-0  { row-gap: 0; }
.row-gap-8  { row-gap: 0.5rem; }
.row-gap-16 { row-gap: 1rem; }
.row-gap-24 { row-gap: 1.5rem; }
.row-gap-40 { row-gap: 2.5rem; }

/* ══════════════════════════════════════════════════════════════
   MASONRY — CSS multi-column
   ══════════════════════════════════════════════════════════════ */

.masonry-2 { column-count: 2; }
.masonry-3 { column-count: 3; }
.masonry-4 { column-count: 4; }
.masonry-5 { column-count: 5; }
.masonry-6 { column-count: 6; }

/* ══════════════════════════════════════════════════════════════
   ORDEN Y VISIBILIDAD (sin breakpoint)
   ══════════════════════════════════════════════════════════════ */

.hidden     { display: none !important; }
.not-hidden { display: block; }
.first      { order: -1; }
.last       { order: 1; }
.not-first,
.not-last   { order: 0; }

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT XL — min-width: 1400px
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1400px) {

  .flex-xl-column         { flex-direction: column !important; }
  .flex-xl-column         > * { flex-basis: auto; }
  .flex-xl-column-reverse { flex-direction: column-reverse !important; }
  .flex-xl-column-reverse > * { flex-basis: auto; }
  .flex-xl-row            { flex-direction: row !important; }
  .flex-xl-row-reverse    { flex-direction: row-reverse !important; }
  .flex-xl-wrap           { flex-wrap: wrap; }
  .flex-xl-wrap-reverse   { flex-wrap: wrap-reverse; }
  .flex-xl-reverse     { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
  .flex-xl-not-reverse { display: flex; flex-direction: row; flex-wrap: wrap; }

  .flex-xl-left     { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .flex-xl-center   { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
  .flex-xl-right    { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .flex-xl-top      { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; }
  .flex-xl-middle   { display: flex; flex-wrap: wrap; align-items: center; }
  .flex-xl-bottom   { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .flex-xl-between  { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; }
  .flex-xl-around   { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; }
  .flex-xl-baseline { display: flex; flex-wrap: wrap; align-items: baseline; }

  .flex-xl-auto > * { width: auto; }
  .flex-xl-1  > * { flex-basis: 100%;      max-width: 100%;      width: 100%; }
  .flex-xl-2  > * { flex-basis: 50%;       max-width: 50%;       width: 50%; }
  .flex-xl-3  > * { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .flex-xl-4  > * { flex-basis: 25%;       max-width: 25%;       width: 25%; }
  .flex-xl-5  > * { flex-basis: 20%;       max-width: 20%;       width: 20%; } /* fix: flex-basisidth/max-max-width */
  .flex-xl-6  > * { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .flex-xl-7  > * { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
  .flex-xl-8  > * { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
  .flex-xl-9  > * { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
  .flex-xl-10 > * { flex-basis: 10%;       max-width: 10%;       width: 10%; }
  .flex-xl-11 > * { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
  .flex-xl-12 > * { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }

  .flex-xl-1-1  { flex-basis: 100%;      max-width: 100%; }
  .flex-xl-1-2  { flex-basis: 50%;       max-width: 50%; }
  .flex-xl-1-3  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xl-2-3  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xl-1-4  { flex-basis: 25%;       max-width: 25%; }
  .flex-xl-2-4  { flex-basis: 50%;       max-width: 50%; }
  .flex-xl-3-4  { flex-basis: 75%;       max-width: 75%; }
  .flex-xl-1-5  { flex-basis: 20%;       max-width: 20%; }
  .flex-xl-2-5  { flex-basis: 40%;       max-width: 40%; }
  .flex-xl-3-5  { flex-basis: 60%;       max-width: 60%; }
  .flex-xl-4-5  { flex-basis: 80%;       max-width: 80%; }
  .flex-xl-1-6  { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-xl-2-6  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xl-3-6  { flex-basis: 50%;       max-width: 50%; }
  .flex-xl-4-6  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xl-5-6  { flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-xl-1-7  { flex-basis: 14.28571%; max-width: 14.28571%; }
  .flex-xl-2-7  { flex-basis: 28.57143%; max-width: 28.57143%; }
  .flex-xl-3-7  { flex-basis: 42.85714%; max-width: 42.85714%; }
  .flex-xl-4-7  { flex-basis: 57.14286%; max-width: 57.14286%; }
  .flex-xl-5-7  { flex-basis: 71.42857%; max-width: 71.42857%; }
  .flex-xl-6-7  { flex-basis: 85.71429%; max-width: 85.71429%; }
  .flex-xl-1-8  { flex-basis: 12.5%;     max-width: 12.5%; }
  .flex-xl-2-8  { flex-basis: 25%;       max-width: 25%; }
  .flex-xl-3-8  { flex-basis: 37.5%;     max-width: 37.5%; }
  .flex-xl-4-8  { flex-basis: 50%;       max-width: 50%; }
  .flex-xl-5-8  { flex-basis: 62.5%;     max-width: 62.5%; }
  .flex-xl-6-8  { flex-basis: 75%;       max-width: 75%; }
  .flex-xl-7-8  { flex-basis: 87.5%;     max-width: 87.5%; }
  .flex-xl-1-9  { flex-basis: 11.11111%; max-width: 11.11111%; }
  .flex-xl-2-9  { flex-basis: 22.22222%; max-width: 22.22222%; }
  .flex-xl-3-9  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xl-4-9  { flex-basis: 44.44444%; max-width: 44.44444%; }
  .flex-xl-5-9  { flex-basis: 55.55556%; max-width: 55.55556%; }
  .flex-xl-6-9  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xl-7-9  { flex-basis: 77.77778%; max-width: 77.77778%; }
  .flex-xl-8-9  { flex-basis: 88.88889%; max-width: 88.88889%; }
  .flex-xl-1-10 { flex-basis: 10%;       max-width: 10%; }
  .flex-xl-2-10 { flex-basis: 20%;       max-width: 20%; }
  .flex-xl-3-10 { flex-basis: 30%;       max-width: 30%; }
  .flex-xl-4-10 { flex-basis: 40%;       max-width: 40%; }
  .flex-xl-5-10 { flex-basis: 50%;       max-width: 50%; }
  .flex-xl-6-10 { flex-basis: 60%;       max-width: 60%; }
  .flex-xl-7-10 { flex-basis: 70%;       max-width: 70%; }
  .flex-xl-8-10 { flex-basis: 80%;       max-width: 80%; }
  .flex-xl-9-10 { flex-basis: 90%;       max-width: 90%; }
  .flex-xl-1-11 { flex-basis: 9.09091%;  max-width: 9.09091%; }
  .flex-xl-2-11 { flex-basis: 18.18182%; max-width: 18.18182%; }
  .flex-xl-3-11 { flex-basis: 27.27273%; max-width: 27.27273%; }
  .flex-xl-4-11 { flex-basis: 36.36364%; max-width: 36.36364%; }
  .flex-xl-5-11 { flex-basis: 45.45455%; max-width: 45.45455%; }
  .flex-xl-6-11 { flex-basis: 54.54545%; max-width: 54.54545%; }
  .flex-xl-7-11 { flex-basis: 63.63636%; max-width: 63.63636%; }
  .flex-xl-8-11 { flex-basis: 72.72727%; max-width: 72.72727%; }
  .flex-xl-9-11 { flex-basis: 81.81818%; max-width: 81.81818%; }
  .flex-xl-10-11{ flex-basis: 90.90909%; max-width: 90.90909%; }
  .flex-xl-1-12 { flex-basis: 8.33333%;  max-width: 8.33333%; }
  .flex-xl-2-12 { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-xl-3-12 { flex-basis: 25%;       max-width: 25%; }
  .flex-xl-4-12 { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xl-5-12 { flex-basis: 41.66667%; max-width: 41.66667%; }
  .flex-xl-6-12 { flex-basis: 50%;       max-width: 50%; }
  .flex-xl-7-12 { flex-basis: 58.33333%; max-width: 58.33333%; }
  .flex-xl-8-12 { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xl-9-12 { flex-basis: 75%;       max-width: 75%; }
  .flex-xl-10-12{ flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-xl-11-12{ flex-basis: 91.66667%; max-width: 91.66667%; }
  .flex-xl-12-12{ flex-basis: 100%;      max-width: 100%; }

  .xl-hidden     { display: none; }
  .xl-not-hidden { display: inline-block; }
  .xl-first      { order: -1; }
  .xl-not-first  { order: 0; }
  .xl-last       { order: 1; }
  .xl-not-last   { order: 0; }

  /* Gap en xl */
  .xl-gap-0  { gap: 0; }
  .xl-gap-8  { gap: 0.5rem; }
  .xl-gap-16 { gap: 1rem; }
  .xl-gap-24 { gap: 1.5rem; }
  .xl-gap-40 { gap: 2.5rem; }

  /* Masonry en xl */
  .xl-masonry-2 { column-count: 2; }
  .xl-masonry-3 { column-count: 3; }
  .xl-masonry-4 { column-count: 4; }
  .xl-masonry-5 { column-count: 5; }
  .xl-masonry-6 { column-count: 6; }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT LG — max-width: 1199px
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {

  .flex-lg-column         { flex-direction: column !important; }
  .flex-lg-column         > * { flex-basis: auto; }
  .flex-lg-column-reverse { flex-direction: column-reverse !important; }
  .flex-lg-column-reverse > * { flex-basis: auto; }
  .flex-lg-row            { flex-direction: row !important; }
  .flex-lg-row-reverse    { flex-direction: row-reverse !important; }
  .flex-lg-wrap           { flex-wrap: wrap; }
  .flex-lg-wrap-reverse   { flex-wrap: wrap-reverse; }
  .flex-lg-reverse     { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
  .flex-lg-not-reverse { display: flex; flex-direction: row; flex-wrap: wrap; }

  .flex-lg-left     { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .flex-lg-center   { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
  .flex-lg-right    { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .flex-lg-top      { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; }
  .flex-lg-middle   { display: flex; flex-wrap: wrap; align-items: center; }
  .flex-lg-bottom   { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .flex-lg-between  { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; }
  .flex-lg-around   { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; }
  .flex-lg-baseline { display: flex; flex-wrap: wrap; align-items: baseline; }

  .flex-lg-auto > * { width: auto; }
  .flex-lg-1  > * { flex-basis: 100%;      max-width: 100%;      width: 100%; }
  .flex-lg-2  > * { flex-basis: 50%;       max-width: 50%;       width: 50%; }
  .flex-lg-3  > * { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .flex-lg-4  > * { flex-basis: 25%;       max-width: 25%;       width: 25%; }
  .flex-lg-5  > * { flex-basis: 20%;       max-width: 20%;       width: 20%; }
  .flex-lg-6  > * { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .flex-lg-7  > * { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
  .flex-lg-8  > * { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
  .flex-lg-9  > * { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
  .flex-lg-10 > * { flex-basis: 10%;       max-width: 10%;       width: 10%; }
  .flex-lg-11 > * { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
  .flex-lg-12 > * { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }

  .flex-lg-1-1  { flex-basis: 100%;      max-width: 100%; }
  .flex-lg-1-2  { flex-basis: 50%;       max-width: 50%; }
  .flex-lg-1-3  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-lg-2-3  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-lg-1-4  { flex-basis: 25%;       max-width: 25%; }
  .flex-lg-2-4  { flex-basis: 50%;       max-width: 50%; }
  .flex-lg-3-4  { flex-basis: 75%;       max-width: 75%; }
  .flex-lg-1-5  { flex-basis: 20%;       max-width: 20%; }
  .flex-lg-2-5  { flex-basis: 40%;       max-width: 40%; }
  .flex-lg-3-5  { flex-basis: 60%;       max-width: 60%; }
  .flex-lg-4-5  { flex-basis: 80%;       max-width: 80%; }
  .flex-lg-1-6  { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-lg-2-6  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-lg-3-6  { flex-basis: 50%;       max-width: 50%; }
  .flex-lg-4-6  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-lg-5-6  { flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-lg-1-7  { flex-basis: 14.28571%; max-width: 14.28571%; }
  .flex-lg-2-7  { flex-basis: 28.57143%; max-width: 28.57143%; }
  .flex-lg-3-7  { flex-basis: 42.85714%; max-width: 42.85714%; }
  .flex-lg-4-7  { flex-basis: 57.14286%; max-width: 57.14286%; }
  .flex-lg-5-7  { flex-basis: 71.42857%; max-width: 71.42857%; }
  .flex-lg-6-7  { flex-basis: 85.71429%; max-width: 85.71429%; }
  .flex-lg-1-8  { flex-basis: 12.5%;     max-width: 12.5%; }
  .flex-lg-2-8  { flex-basis: 25%;       max-width: 25%; }
  .flex-lg-3-8  { flex-basis: 37.5%;     max-width: 37.5%; }
  .flex-lg-4-8  { flex-basis: 50%;       max-width: 50%; }
  .flex-lg-5-8  { flex-basis: 62.5%;     max-width: 62.5%; }
  .flex-lg-6-8  { flex-basis: 75%;       max-width: 75%; }
  .flex-lg-7-8  { flex-basis: 87.5%;     max-width: 87.5%; }
  .flex-lg-1-9  { flex-basis: 11.11111%; max-width: 11.11111%; }
  .flex-lg-2-9  { flex-basis: 22.22222%; max-width: 22.22222%; }
  .flex-lg-3-9  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-lg-4-9  { flex-basis: 44.44444%; max-width: 44.44444%; }
  .flex-lg-5-9  { flex-basis: 55.55556%; max-width: 55.55556%; }
  .flex-lg-6-9  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-lg-7-9  { flex-basis: 77.77778%; max-width: 77.77778%; }
  .flex-lg-8-9  { flex-basis: 88.88889%; max-width: 88.88889%; }
  .flex-lg-1-10 { flex-basis: 10%;       max-width: 10%; }
  .flex-lg-2-10 { flex-basis: 20%;       max-width: 20%; }
  .flex-lg-3-10 { flex-basis: 30%;       max-width: 30%; }
  .flex-lg-4-10 { flex-basis: 40%;       max-width: 40%; }
  .flex-lg-5-10 { flex-basis: 50%;       max-width: 50%; }
  .flex-lg-6-10 { flex-basis: 60%;       max-width: 60%; }
  .flex-lg-7-10 { flex-basis: 70%;       max-width: 70%; }
  .flex-lg-8-10 { flex-basis: 80%;       max-width: 80%; }
  .flex-lg-9-10 { flex-basis: 90%;       max-width: 90%; }
  .flex-lg-1-12 { flex-basis: 8.33333%;  max-width: 8.33333%; }
  .flex-lg-2-12 { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-lg-3-12 { flex-basis: 25%;       max-width: 25%; }
  .flex-lg-4-12 { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-lg-5-12 { flex-basis: 41.66667%; max-width: 41.66667%; }
  .flex-lg-6-12 { flex-basis: 50%;       max-width: 50%; }
  .flex-lg-7-12 { flex-basis: 58.33333%; max-width: 58.33333%; }
  .flex-lg-8-12 { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-lg-9-12 { flex-basis: 75%;       max-width: 75%; }
  .flex-lg-10-12{ flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-lg-11-12{ flex-basis: 91.66667%; max-width: 91.66667%; }
  .flex-lg-12-12{ flex-basis: 100%;      max-width: 100%; }

  .lg-hidden     { display: none; }
  .lg-not-hidden { display: inline-block; }
  .lg-first      { order: -1; }
  .lg-not-first  { order: 0; }
  .lg-last       { order: 1; }
  .lg-not-last   { order: 0; }

  .lg-gap-0  { gap: 0; }
  .lg-gap-8  { gap: 0.5rem; }
  .lg-gap-16 { gap: 1rem; }
  .lg-gap-24 { gap: 1.5rem; }
  .lg-gap-40 { gap: 2.5rem; }

  .lg-masonry-2 { column-count: 2; }
  .lg-masonry-3 { column-count: 3; }
  .lg-masonry-4 { column-count: 4; }
  .lg-masonry-5 { column-count: 5; }
  .lg-masonry-6 { column-count: 6; }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT MD — max-width: 991px
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

  .flex-md-column         { flex-direction: column !important; }
  .flex-md-column         > * { flex-basis: auto; }
  .flex-md-column-reverse { flex-direction: column-reverse !important; }
  .flex-md-column-reverse > * { flex-basis: auto; }
  .flex-md-row            { flex-direction: row !important; }
  .flex-md-row-reverse    { flex-direction: row-reverse !important; }
  .flex-md-wrap           { flex-wrap: wrap; }
  .flex-md-wrap-reverse   { flex-wrap: wrap-reverse; }
  .flex-md-reverse     { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
  .flex-md-not-reverse { display: flex; flex-direction: row; flex-wrap: wrap; }

  .flex-md-left     { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .flex-md-center   { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
  .flex-md-right    { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .flex-md-top      { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .flex-md-middle   { display: flex; flex-wrap: wrap; align-items: center; }
  .flex-md-bottom   { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .flex-md-between  { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; }
  .flex-md-around   { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; }
  .flex-md-baseline { display: flex; flex-wrap: wrap; align-items: baseline; }

  .flex-md-auto > * { width: auto; }
  .flex-md-1  > * { flex-basis: 100%;      max-width: 100%;      width: 100%; }
  .flex-md-2  > * { flex-basis: 50%;       max-width: 50%;       width: 50%; }
  .flex-md-3  > * { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .flex-md-4  > * { flex-basis: 25%;       max-width: 25%;       width: 25%; }
  .flex-md-5  > * { flex-basis: 20%;       max-width: 20%;       width: 20%; }
  .flex-md-6  > * { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .flex-md-7  > * { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
  .flex-md-8  > * { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
  .flex-md-9  > * { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
  .flex-md-10 > * { flex-basis: 10%;       max-width: 10%;       width: 10%; }
  .flex-md-11 > * { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
  .flex-md-12 > * { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }

  .flex-md-1-1  { flex-basis: 100%;      max-width: 100%; }
  .flex-md-1-2  { flex-basis: 50%;       max-width: 50%; }
  .flex-md-1-3  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-md-2-3  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-md-1-4  { flex-basis: 25%;       max-width: 25%; }
  .flex-md-2-4  { flex-basis: 50%;       max-width: 50%; }
  .flex-md-3-4  { flex-basis: 75%;       max-width: 75%; }
  .flex-md-1-5  { flex-basis: 20%;       max-width: 20%; }
  .flex-md-2-5  { flex-basis: 40%;       max-width: 40%; }
  .flex-md-3-5  { flex-basis: 60%;       max-width: 60%; }
  .flex-md-4-5  { flex-basis: 80%;       max-width: 80%; }
  .flex-md-1-6  { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-md-2-6  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-md-3-6  { flex-basis: 50%;       max-width: 50%; }
  .flex-md-4-6  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-md-5-6  { flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-md-1-7  { flex-basis: 14.28571%; max-width: 14.28571%; }
  .flex-md-2-7  { flex-basis: 28.57143%; max-width: 28.57143%; }
  .flex-md-3-7  { flex-basis: 42.85714%; max-width: 42.85714%; }
  .flex-md-4-7  { flex-basis: 57.14286%; max-width: 57.14286%; }
  .flex-md-5-7  { flex-basis: 71.42857%; max-width: 71.42857%; }
  .flex-md-6-7  { flex-basis: 85.71429%; max-width: 85.71429%; }
  .flex-md-1-8  { flex-basis: 12.5%;     max-width: 12.5%; }
  .flex-md-2-8  { flex-basis: 25%;       max-width: 25%; }
  .flex-md-3-8  { flex-basis: 37.5%;     max-width: 37.5%; }
  .flex-md-4-8  { flex-basis: 50%;       max-width: 50%; }
  .flex-md-5-8  { flex-basis: 62.5%;     max-width: 62.5%; }
  .flex-md-6-8  { flex-basis: 75%;       max-width: 75%; }
  .flex-md-7-8  { flex-basis: 87.5%;     max-width: 87.5%; }
  .flex-md-1-9  { flex-basis: 11.11111%; max-width: 11.11111%; }
  .flex-md-2-9  { flex-basis: 22.22222%; max-width: 22.22222%; }
  .flex-md-3-9  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-md-4-9  { flex-basis: 44.44444%; max-width: 44.44444%; }
  .flex-md-5-9  { flex-basis: 55.55556%; max-width: 55.55556%; }
  .flex-md-6-9  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-md-7-9  { flex-basis: 77.77778%; max-width: 77.77778%; }
  .flex-md-8-9  { flex-basis: 88.88889%; max-width: 88.88889%; }
  .flex-md-1-10 { flex-basis: 10%;       max-width: 10%; }
  .flex-md-2-10 { flex-basis: 20%;       max-width: 20%; }
  .flex-md-3-10 { flex-basis: 30%;       max-width: 30%; }
  .flex-md-4-10 { flex-basis: 40%;       max-width: 40%; }
  .flex-md-5-10 { flex-basis: 50%;       max-width: 50%; }
  .flex-md-6-10 { flex-basis: 60%;       max-width: 60%; }
  .flex-md-7-10 { flex-basis: 70%;       max-width: 70%; }
  .flex-md-8-10 { flex-basis: 80%;       max-width: 80%; }
  .flex-md-9-10 { flex-basis: 90%;       max-width: 90%; }
  .flex-md-1-12 { flex-basis: 8.33333%;  max-width: 8.33333%; }
  .flex-md-2-12 { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-md-3-12 { flex-basis: 25%;       max-width: 25%; }
  .flex-md-4-12 { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-md-5-12 { flex-basis: 41.66667%; max-width: 41.66667%; }
  .flex-md-6-12 { flex-basis: 50%;       max-width: 50%; }
  .flex-md-7-12 { flex-basis: 58.33333%; max-width: 58.33333%; }
  .flex-md-8-12 { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-md-9-12 { flex-basis: 75%;       max-width: 75%; }
  .flex-md-10-12{ flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-md-11-12{ flex-basis: 91.66667%; max-width: 91.66667%; }
  .flex-md-12-12{ flex-basis: 100%;      max-width: 100%; }

  .md-hidden     { display: none; }
  .md-not-hidden { display: inline-block; }
  .md-first      { order: -1; }
  .md-not-first  { order: 0; }
  .md-last       { order: 1; }
  .md-not-last   { order: 0; }

  .md-gap-0  { gap: 0; }
  .md-gap-8  { gap: 0.5rem; }
  .md-gap-16 { gap: 1rem; }
  .md-gap-24 { gap: 1.5rem; }
  .md-gap-40 { gap: 2.5rem; }

  .md-masonry-2 { column-count: 2; }
  .md-masonry-3 { column-count: 3; }
  .md-masonry-4 { column-count: 4; }
  .md-masonry-5 { column-count: 5; }
  .md-masonry-6 { column-count: 6; }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT SM — max-width: 767px
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .flex-sm-column         { flex-direction: column !important; }
  .flex-sm-column         > * { flex-basis: auto; }
  .flex-sm-column-reverse { flex-direction: column-reverse !important; }
  .flex-sm-column-reverse > * { flex-basis: auto; }
  .flex-sm-row            { flex-direction: row !important; }
  .flex-sm-row-reverse    { flex-direction: row-reverse !important; }
  .flex-sm-wrap           { flex-wrap: wrap; }
  .flex-sm-wrap-reverse   { flex-wrap: wrap-reverse; }
  .flex-sm-reverse     { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
  .flex-sm-not-reverse { display: flex; flex-direction: row; flex-wrap: wrap; }

  .flex-sm-left     { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .flex-sm-center   { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
  .flex-sm-right    { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .flex-sm-top      { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .flex-sm-middle   { display: flex; flex-wrap: wrap; align-items: center; }
  .flex-sm-bottom   { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .flex-sm-between  { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .flex-sm-around   { display: flex; flex-wrap: wrap; justify-content: space-around; }
  .flex-sm-baseline { display: flex; flex-wrap: wrap; align-items: baseline; }

  .flex-sm-auto > * { width: auto; }
  .flex-sm-1  > * { flex-basis: 100%;      max-width: 100%;      width: 100%; }
  .flex-sm-2  > * { flex-basis: 50%;       max-width: 50%;       width: 50%; }
  .flex-sm-3  > * { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .flex-sm-4  > * { flex-basis: 25%;       max-width: 25%;       width: 25%; }
  .flex-sm-5  > * { flex-basis: 20%;       max-width: 20%;       width: 20%; }
  .flex-sm-6  > * { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .flex-sm-7  > * { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
  .flex-sm-8  > * { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
  .flex-sm-9  > * { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
  .flex-sm-10 > * { flex-basis: 10%;       max-width: 10%;       width: 10%; }
  .flex-sm-11 > * { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
  .flex-sm-12 > * { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }

  .flex-sm-1-1  { flex-basis: 100%;      max-width: 100%; }
  .flex-sm-1-2  { flex-basis: 50%;       max-width: 50%; }
  .flex-sm-1-3  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-sm-2-3  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-sm-1-4  { flex-basis: 25%;       max-width: 25%; }
  .flex-sm-2-4  { flex-basis: 50%;       max-width: 50%; }
  .flex-sm-3-4  { flex-basis: 75%;       max-width: 75%; }
  .flex-sm-1-5  { flex-basis: 20%;       max-width: 20%; }
  .flex-sm-2-5  { flex-basis: 40%;       max-width: 40%; }
  .flex-sm-3-5  { flex-basis: 60%;       max-width: 60%; }
  .flex-sm-4-5  { flex-basis: 80%;       max-width: 80%; }
  .flex-sm-1-6  { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-sm-2-6  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-sm-3-6  { flex-basis: 50%;       max-width: 50%; }
  .flex-sm-4-6  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-sm-5-6  { flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-sm-1-7  { flex-basis: 14.28571%; max-width: 14.28571%; }
  .flex-sm-2-7  { flex-basis: 28.57143%; max-width: 28.57143%; }
  .flex-sm-3-7  { flex-basis: 42.85714%; max-width: 42.85714%; }
  .flex-sm-4-7  { flex-basis: 57.14286%; max-width: 57.14286%; }
  .flex-sm-5-7  { flex-basis: 71.42857%; max-width: 71.42857%; }
  .flex-sm-6-7  { flex-basis: 85.71429%; max-width: 85.71429%; }
  .flex-sm-1-8  { flex-basis: 12.5%;     max-width: 12.5%; }
  .flex-sm-2-8  { flex-basis: 25%;       max-width: 25%; }
  .flex-sm-3-8  { flex-basis: 37.5%;     max-width: 37.5%; }
  .flex-sm-4-8  { flex-basis: 50%;       max-width: 50%; }
  .flex-sm-5-8  { flex-basis: 62.5%;     max-width: 62.5%; }
  .flex-sm-6-8  { flex-basis: 75%;       max-width: 75%; }
  .flex-sm-7-8  { flex-basis: 87.5%;     max-width: 87.5%; }
  .flex-sm-1-12 { flex-basis: 8.33333%;  max-width: 8.33333%; }
  .flex-sm-2-12 { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-sm-3-12 { flex-basis: 25%;       max-width: 25%; }
  .flex-sm-4-12 { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-sm-5-12 { flex-basis: 41.66667%; max-width: 41.66667%; }
  .flex-sm-6-12 { flex-basis: 50%;       max-width: 50%; }
  .flex-sm-7-12 { flex-basis: 58.33333%; max-width: 58.33333%; }
  .flex-sm-8-12 { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-sm-9-12 { flex-basis: 75%;       max-width: 75%; }
  .flex-sm-10-12{ flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-sm-11-12{ flex-basis: 91.66667%; max-width: 91.66667%; }
  .flex-sm-12-12{ flex-basis: 100%;      max-width: 100%; }

  .sm-hidden     { display: none; }
  .sm-not-hidden { display: inline-block; }
  .sm-first      { order: -1; }
  .sm-not-first  { order: 0; }
  .sm-last       { order: 1; }
  .sm-not-last   { order: 0; }

  .sm-gap-0  { gap: 0; }
  .sm-gap-8  { gap: 0.5rem; }
  .sm-gap-16 { gap: 1rem; }
  .sm-gap-24 { gap: 1.5rem; }
  .sm-gap-40 { gap: 2.5rem; }

  .sm-masonry-2 { column-count: 2; }
  .sm-masonry-3 { column-count: 3; }
}

/* ══════════════════════════════════════════════════════════════
   BREAKPOINT XS — max-width: 575px
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {

  .flex-xs-column         { flex-direction: column !important; }
  .flex-xs-column         > * { flex-basis: auto; }
  .flex-xs-column-reverse { flex-direction: column-reverse !important; }
  .flex-xs-column-reverse > * { flex-basis: auto; }
  .flex-xs-row            { flex-direction: row !important; }
  .flex-xs-row-reverse    { flex-direction: row-reverse !important; }
  .flex-xs-wrap           { flex-wrap: wrap; }
  .flex-xs-wrap-reverse   { flex-wrap: wrap-reverse; }
  .flex-xs-reverse     { display: flex; flex-direction: row-reverse; flex-wrap: wrap-reverse; }
  .flex-xs-not-reverse { display: flex; flex-direction: row; flex-wrap: wrap; }

  .flex-xs-left     { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
  .flex-xs-center   { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
  .flex-xs-right    { display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
  .flex-xs-top      { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .flex-xs-middle   { display: flex; flex-wrap: wrap; align-items: center; }
  .flex-xs-bottom   { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .flex-xs-between  { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .flex-xs-around   { display: flex; flex-wrap: wrap; justify-content: space-around; }
  .flex-xs-baseline { display: flex; flex-wrap: wrap; align-items: baseline; }

  .flex-xs-auto > * { width: auto; }
  .flex-xs-1  > * { flex-basis: 100%;      max-width: 100%;      width: 100%; }
  .flex-xs-2  > * { flex-basis: 50%;       max-width: 50%;       width: 50%; }
  .flex-xs-3  > * { flex-basis: 33.33333%; max-width: 33.33333%; width: 33.33333%; }
  .flex-xs-4  > * { flex-basis: 25%;       max-width: 25%;       width: 25%; }
  .flex-xs-5  > * { flex-basis: 20%;       max-width: 20%;       width: 20%; }
  .flex-xs-6  > * { flex-basis: 16.66667%; max-width: 16.66667%; width: 16.66667%; }
  .flex-xs-7  > * { flex-basis: 14.28571%; max-width: 14.28571%; width: 14.28571%; }
  .flex-xs-8  > * { flex-basis: 12.5%;     max-width: 12.5%;     width: 12.5%; }
  .flex-xs-9  > * { flex-basis: 11.11111%; max-width: 11.11111%; width: 11.11111%; }
  .flex-xs-10 > * { flex-basis: 10%;       max-width: 10%;       width: 10%; }
  .flex-xs-11 > * { flex-basis: 9.09091%;  max-width: 9.09091%;  width: 9.09091%; }
  .flex-xs-12 > * { flex-basis: 8.33333%;  max-width: 8.33333%;  width: 8.33333%; }

  .flex-xs-1-1  { flex-basis: 100%;      max-width: 100%; }
  .flex-xs-1-2  { flex-basis: 50%;       max-width: 50%; }
  .flex-xs-1-3  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xs-2-3  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xs-1-4  { flex-basis: 25%;       max-width: 25%; }
  .flex-xs-2-4  { flex-basis: 50%;       max-width: 50%; }
  .flex-xs-3-4  { flex-basis: 75%;       max-width: 75%; }
  .flex-xs-1-5  { flex-basis: 20%;       max-width: 20%; }
  .flex-xs-2-5  { flex-basis: 40%;       max-width: 40%; }
  .flex-xs-3-5  { flex-basis: 60%;       max-width: 60%; }
  .flex-xs-4-5  { flex-basis: 80%;       max-width: 80%; }
  .flex-xs-1-6  { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-xs-2-6  { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xs-3-6  { flex-basis: 50%;       max-width: 50%; }
  .flex-xs-4-6  { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xs-5-6  { flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-xs-1-7  { flex-basis: 14.28571%; max-width: 14.28571%; }
  .flex-xs-2-7  { flex-basis: 28.57143%; max-width: 28.57143%; }
  .flex-xs-3-7  { flex-basis: 42.85714%; max-width: 42.85714%; }
  .flex-xs-4-7  { flex-basis: 57.14286%; max-width: 57.14286%; }
  .flex-xs-5-7  { flex-basis: 71.42857%; max-width: 71.42857%; }
  .flex-xs-6-7  { flex-basis: 85.71429%; max-width: 85.71429%; }
  .flex-xs-1-8  { flex-basis: 12.5%;     max-width: 12.5%; }
  .flex-xs-2-8  { flex-basis: 25%;       max-width: 25%; }
  .flex-xs-3-8  { flex-basis: 37.5%;     max-width: 37.5%; }
  .flex-xs-4-8  { flex-basis: 50%;       max-width: 50%; }
  .flex-xs-5-8  { flex-basis: 62.5%;     max-width: 62.5%; }
  .flex-xs-6-8  { flex-basis: 75%;       max-width: 75%; }
  .flex-xs-7-8  { flex-basis: 87.5%;     max-width: 87.5%; }
  .flex-xs-1-12 { flex-basis: 8.33333%;  max-width: 8.33333%; }
  .flex-xs-2-12 { flex-basis: 16.66667%; max-width: 16.66667%; }
  .flex-xs-3-12 { flex-basis: 25%;       max-width: 25%; }
  .flex-xs-4-12 { flex-basis: 33.33333%; max-width: 33.33333%; }
  .flex-xs-5-12 { flex-basis: 41.66667%; max-width: 41.66667%; }
  .flex-xs-6-12 { flex-basis: 50%;       max-width: 50%; }
  .flex-xs-7-12 { flex-basis: 58.33333%; max-width: 58.33333%; }
  .flex-xs-8-12 { flex-basis: 66.66667%; max-width: 66.66667%; }
  .flex-xs-9-12 { flex-basis: 75%;       max-width: 75%; }
  .flex-xs-10-12{ flex-basis: 83.33333%; max-width: 83.33333%; }
  .flex-xs-11-12{ flex-basis: 91.66667%; max-width: 91.66667%; }
  .flex-xs-12-12{ flex-basis: 100%;      max-width: 100%; }

  .xs-hidden     { display: none; }
  .xs-not-hidden { display: inline-block; }
  .xs-first      { order: -1; }
  .xs-not-first  { order: 0; }
  .xs-last       { order: 1; }
  .xs-not-last   { order: 0; }

  .xs-gap-0  { gap: 0; }
  .xs-gap-8  { gap: 0.5rem; }
  .xs-gap-16 { gap: 1rem; }
  .xs-gap-24 { gap: 1.5rem; }

  .xs-masonry-2 { column-count: 2; }
}