/*
 * Mise en page : grilles .flxgrid et .fg-*.
 * Source de vérité : modifier d’abord ce fichier ; nos-produits.css reprend la grille pour #prdts — à synchroniser depuis ici.
 * Guide lisible (FR, exemples) : MD/mep-css-guide.md (à la racine du thème).
 *
 * Référence breakpoints — garder alignée avec les @media du fichier :
 * — flxgrid (presets, flxgrid--gap-divider, flxgrid-gap-items-divider) : défaut « petit » puis min-width 720px,
 *   puis min-width 1024px (colonnes qui augmentent avec la largeur).
 * — fg-* : fg-lg-* par défaut ; fg-md-* (medium) si max-width 1024px ; fg-sm-* si max-width 720px.
 */
 /*couleurs*/
 /*texte*/
 .bleu-lcf-texte {color: #1b75bc !important ;}
 .bleu-fonce-lcf-texte {color: #1c4e71 !important ;}


/* Grille flx : l’espacement vient du gap, pas de la marge des cartes */
 .flxgrid .card {
  margin-bottom: 0;
}
 .flxgrid__item > a > .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/*
 * Grille flex réutilisable (hors contexte #prdts).
 * --flxgrid-cols : colonnes à ce breakpoint (1–12). --flxgrid-gap : espacement.
 */
.flxgrid {
  --flxgrid-gap: 1.5rem;
  --flxgrid-cols: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--flxgrid-gap);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Même échelle que .fg-row.fg-gap-* : n × 0,25rem (0–24). S’applique à --flxgrid-gap. */
.flxgrid.flxgrid-gap-0 { --flxgrid-gap: 0; }
.flxgrid.flxgrid-gap-1 { --flxgrid-gap: 0.25rem; }
.flxgrid.flxgrid-gap-2 { --flxgrid-gap: 0.5rem; }
.flxgrid.flxgrid-gap-3 { --flxgrid-gap: 0.75rem; }
.flxgrid.flxgrid-gap-4 { --flxgrid-gap: 1rem; }
.flxgrid.flxgrid-gap-5 { --flxgrid-gap: 1.25rem; }
.flxgrid.flxgrid-gap-6 { --flxgrid-gap: 1.5rem; }
.flxgrid.flxgrid-gap-7 { --flxgrid-gap: 1.75rem; }
.flxgrid.flxgrid-gap-8 { --flxgrid-gap: 2rem; }
.flxgrid.flxgrid-gap-9 { --flxgrid-gap: 2.25rem; }
.flxgrid.flxgrid-gap-10 { --flxgrid-gap: 2.5rem; }
.flxgrid.flxgrid-gap-11 { --flxgrid-gap: 2.75rem; }
.flxgrid.flxgrid-gap-12 { --flxgrid-gap: 3rem; }
.flxgrid.flxgrid-gap-13 { --flxgrid-gap: 3.25rem; }
.flxgrid.flxgrid-gap-14 { --flxgrid-gap: 3.5rem; }
.flxgrid.flxgrid-gap-15 { --flxgrid-gap: 3.75rem; }
.flxgrid.flxgrid-gap-16 { --flxgrid-gap: 4rem; }
.flxgrid.flxgrid-gap-17 { --flxgrid-gap: 4.25rem; }
.flxgrid.flxgrid-gap-18 { --flxgrid-gap: 4.5rem; }
.flxgrid.flxgrid-gap-19 { --flxgrid-gap: 4.75rem; }
.flxgrid.flxgrid-gap-20 { --flxgrid-gap: 5rem; }
.flxgrid.flxgrid-gap-21 { --flxgrid-gap: 5.25rem; }
.flxgrid.flxgrid-gap-22 { --flxgrid-gap: 5.5rem; }
.flxgrid.flxgrid-gap-23 { --flxgrid-gap: 5.75rem; }
.flxgrid.flxgrid-gap-24 { --flxgrid-gap: 6rem; }
.flxgrid.flxgrid-gap-sm { --flxgrid-gap: 0.25rem; }
.flxgrid.flxgrid-gap { --flxgrid-gap: 0.5rem; }
.flxgrid.flxgrid-gap-lg { --flxgrid-gap: 1rem; }

.flxgrid__item {
  flex: 0 1
    calc(
      (100% - (var(--flxgrid-cols) - 1) * var(--flxgrid-gap)) /
        var(--flxgrid-cols)
    );
  max-width: calc(
    (100% - (var(--flxgrid-cols) - 1) * var(--flxgrid-gap)) /
      var(--flxgrid-cols)
  );
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.flxgrid__item > a {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.flxgrid .card {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Cartes du repeater « à venir » : même chaîne flex que .flxgrid__item > a + .card */
#prdts #avenir .flxgrid__item > .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/*
 * Carte en grille : .flxgrid-stack-end sur un div ou sur le <a> (lien-carte).
 * Cartes même hauteur via .flxgrid (align-items: stretch) + conteneur en flex: 1.
 * .flxgrid-card-footer = zone « pied » de la carte (souvent .card-section) : prend l’espace
 * restant sous l’image ; le contenu est centré verticalement (ex. titres de hauteurs différentes).
 * Avec .txt-centrer sur le même élément pour centrer le texte horizontalement.
 */
.flxgrid__item > .flxgrid-stack-end,
.flxgrid__item > a > .flxgrid-stack-end,
.flxgrid__item > a.flxgrid-stack-end {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
}

.flxgrid__item > .flxgrid-stack-end > .card-section:not(.flxgrid-card-footer),
.flxgrid__item > a > .flxgrid-stack-end > .card-section:not(.flxgrid-card-footer),
.flxgrid__item > a.flxgrid-stack-end > .card-section:not(.flxgrid-card-footer) {
  flex: 0 0 auto;
}

.flxgrid__item > .flxgrid-stack-end > .flxgrid-card-footer,
.flxgrid__item > a > .flxgrid-stack-end > .flxgrid-card-footer,
.flxgrid__item > a.flxgrid-stack-end > .flxgrid-card-footer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* Preset type Foundation : 1 / 3 / 5 colonnes (<720 / ≥720 / ≥1024) */
.flxgrid-preset-1-3-5 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-3-5 {
    --flxgrid-cols: 3;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-3-5 {
    --flxgrid-cols: 5;
  }
}

/* Exemple : 1 / 2 / 4 — copier et renommer pour d’autres réglages */
/* Également : 4 large / 2 medium / 1 small (presets grille AT). */
.flxgrid-preset-1-2-4 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-2-4 {
    --flxgrid-cols: 2;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-2-4 {
    --flxgrid-cols: 4;
  }
}

/* 1 / 2 / 3 colonnes (souvent « à venir » dans une carte parent) */
.flxgrid-preset-1-2-3 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-2-3 {
    --flxgrid-cols: 2;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-2-3 {
    --flxgrid-cols: 3;
  }
}

/* 1 colonne (<1024), 3 colonnes (≥1024) — medium et small comme une colonne */
.flxgrid-preset-1-1-3 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-1-3 {
    --flxgrid-cols: 3;
  }
}

/* Presets grille AT — ordre small / medium / large (<720 / ≥720 / ≥1024). */
.flxgrid-preset-2-3-6 {
  --flxgrid-cols: 2;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-2-3-6 {
    --flxgrid-cols: 3;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-2-3-6 {
    --flxgrid-cols: 6;
  }
}

.flxgrid-preset-1-3-6 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-3-6 {
    --flxgrid-cols: 3;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-3-6 {
    --flxgrid-cols: 6;
  }
}

.flxgrid-preset-1-2-5 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-2-5 {
    --flxgrid-cols: 2;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-2-5 {
    --flxgrid-cols: 5;
  }
}

.flxgrid-preset-1-2-2 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-2-2 {
    --flxgrid-cols: 2;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-2-2 {
    --flxgrid-cols: 2;
  }
}

.flxgrid-preset-1-1-2 {
  --flxgrid-cols: 1;
}
@media screen and (min-width: 720px) {
  .flxgrid-preset-1-1-2 {
    --flxgrid-cols: 1;
  }
}
@media screen and (min-width: 1024px) {
  .flxgrid-preset-1-1-2 {
    --flxgrid-cols: 2;
  }
}

/*
 * Séparateur au milieu du gap entre exactement 2 .flxgrid__item :
 * — grand écran (≥1024px) : trait vertical au centre du gap ;
 * — medium / small (<1024px) : trait horizontal centré dans le gap entre les deux blocs.
 * À combiner avec .flxgrid-preset-1-1-2 + .flxgrid-gap-* (le gap sert à positionner le trait).
 * Couleur : --flxgrid-divider-color sur le conteneur (optionnel, défaut #1b75bc).
 */
.flxgrid.flxgrid--gap-divider {
  position: relative;
  --flxgrid-divider-color: #1b75bc;
}

@media screen and (min-width: 1024px) {
  .flxgrid.flxgrid--gap-divider .flxgrid__item {
    position: relative;
    z-index: 1;
  }
  .flxgrid.flxgrid--gap-divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--flxgrid-divider-color);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
  }
}

@media screen and (max-width: 1023px) {
  .flxgrid.flxgrid--gap-divider .flxgrid__item {
    position: relative;
    z-index: 1;
  }
  .flxgrid.flxgrid--gap-divider .flxgrid__item:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--flxgrid-gap) / -2);
    height: 1px;
    background: var(--flxgrid-divider-color);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
  }
}

/*
 * Séparateurs entre plusieurs .flxgrid__item (réutilisable).
 * À combiner avec .flxgrid-preset-1-2-3 (même breakpoints : petit écran / 720–1023 px / ≥1024 px).
 * Couleur : --flxgrid-divider-items-color sur le conteneur (optionnel).
 * Traits verticaux dans le gap au bureau ; traits horizontaux dans le gap quand une colonne (mobile).
 */
.flxgrid.flxgrid-gap-items-divider {
  position: relative;
  --flxgrid-divider-items-color: #1b75bc;
}

.flxgrid.flxgrid-gap-items-divider .flxgrid__item {
  position: relative;
  z-index: 1;
}

.flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider .flxgrid__item::before,
.flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider .flxgrid__item::after {
  pointer-events: none;
}

@media screen and (max-width: 719px) {
  .flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider .flxgrid__item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--flxgrid-gap) / -2);
    height: 1px;
    background: var(--flxgrid-divider-items-color);
    transform: translateY(-50%);
    z-index: 2;
  }
}

@media screen and (min-width: 720px) and (max-width: 1023px) {
  .flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider .flxgrid__item:nth-child(2n)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--flxgrid-gap) / -2);
    width: 1px;
    background: var(--flxgrid-divider-items-color);
    transform: translateX(-50%);
    z-index: 2;
  }

  .flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider
    .flxgrid__item:nth-child(2n + 1):not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--flxgrid-gap) / -2);
    height: 1px;
    background: var(--flxgrid-divider-items-color);
    transform: translateY(-50%);
    z-index: 2;
  }
}

@media screen and (min-width: 1024px) {
  .flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider .flxgrid__item:nth-child(3n + 2)::after,
  .flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider .flxgrid__item:nth-child(3n)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--flxgrid-gap) / -2);
    width: 1px;
    background: var(--flxgrid-divider-items-color);
    transform: translateX(-50%);
    z-index: 2;
  }

  .flxgrid.flxgrid-preset-1-2-3.flxgrid-gap-items-divider
    .flxgrid__item:nth-child(3n + 1):not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--flxgrid-gap) / -2);
    height: 1px;
    background: var(--flxgrid-divider-items-color);
    transform: translateY(-50%);
    z-index: 2;
  }
}

/*
 * Grille 12 — flex + flex-grow = parts sur 12 (compatible avec gap)
 * Les anciennes largeurs en % + max-width + gap laissaient du vide à droite.
 * Paliers fg-* :
 *   lg — défaut (grand écran), sans media query ;
 *   md — medium : .fg-md-* dans @media seulement si largeur ≤ 1024px ;
 *   sm — petit : .fg-sm-* dans @media seulement si largeur ≤ 720px.
 * Les classes .fg-* ci-dessous sont globales (pas de scope #prdts).
 */

.fg-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
  align-content: flex-start;
}

.fg-col {
  min-width: 0;
  box-sizing: border-box;
}

.fg-row.fg-gap-0 { gap: 0; }

.fg-row.fg-gap-1 { gap: 0.25rem; }
.fg-row.fg-gap-2 { gap: 0.5rem; }
.fg-row.fg-gap-3 { gap: 0.75rem; }
.fg-row.fg-gap-4 { gap: 1rem; }
.fg-row.fg-gap-5 { gap: 1.25rem; }
.fg-row.fg-gap-6 { gap: 1.5rem; }
.fg-row.fg-gap-7 { gap: 1.75rem; }
.fg-row.fg-gap-8 { gap: 2rem; }
.fg-row.fg-gap-9 { gap: 2.25rem; }
.fg-row.fg-gap-10 { gap: 2.5rem; }
.fg-row.fg-gap-11 { gap: 2.75rem; }
.fg-row.fg-gap-12 { gap: 3rem; }

.fg-row.fg-gap-sm { gap: 0.25rem; }
.fg-row.fg-gap { gap: 0.5rem; }
.fg-row.fg-gap-lg { gap: 1rem; }

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

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

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

.fg-col.fg-vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fg-col.fg-vbottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fg-col.fg-hcenter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fg-col.fg-vcenter.fg-hcenter {
  align-items: center;
  justify-content: center;
}
.fg-col.fg-vbottom.fg-hcenter {
  align-items: center;
  justify-content: flex-end;
}

.fg-col.fg-text-left { text-align: left; }
.fg-col.fg-text-center { text-align: center; }
.fg-col.fg-text-right { text-align: right; }

/*
 * Ordre des colonnes dans .fg-row (flex order), type Tailwind.
 * Utiliser sur .fg-col : ex. fg-lg-order-last fg-sm-order-first (image en bas en desktop, en haut en mobile).
 * Les règles fg-md-* / fg-sm-* (medium ≤1024px, petit ≤720px) dans leurs media queries écrasent fg-lg-* si les deux sont présentes (même spécificité, voir plus bas).
 */
.fg-col.fg-lg-order-first { order: -1; }
.fg-col.fg-lg-order-last { order: 999; }
.fg-col.fg-lg-order-none { order: 0; }
.fg-col.fg-lg-order-1 { order: 1; }
.fg-col.fg-lg-order-2 { order: 2; }
.fg-col.fg-lg-order-3 { order: 3; }
.fg-col.fg-lg-order-4 { order: 4; }
.fg-col.fg-lg-order-5 { order: 5; }
.fg-col.fg-lg-order-6 { order: 6; }
.fg-col.fg-lg-order-7 { order: 7; }
.fg-col.fg-lg-order-8 { order: 8; }
.fg-col.fg-lg-order-9 { order: 9; }
.fg-col.fg-lg-order-10 { order: 10; }
.fg-col.fg-lg-order-11 { order: 11; }
.fg-col.fg-lg-order-12 { order: 12; }

/* align-items sur l’axe secondaire d’une .fg-col en flex colonne (ex. avec fg-vcenter) — gauche / centre / droite */
.fg-col.fg-lg-items-start { align-items: flex-start; }
.fg-col.fg-lg-items-center { align-items: center; }
.fg-col.fg-lg-items-end { align-items: flex-end; }

.fg-lg-1 { flex: 1 1 0%; min-width: 0; }
.fg-lg-2 { flex: 2 1 0%; min-width: 0; }
.fg-lg-3 { flex: 3 1 0%; min-width: 0; }
.fg-lg-4 { flex: 4 1 0%; min-width: 0; }
.fg-lg-5 { flex: 5 1 0%; min-width: 0; }
.fg-lg-6 { flex: 6 1 0%; min-width: 0; }
.fg-lg-7 { flex: 7 1 0%; min-width: 0; }
.fg-lg-8 { flex: 8 1 0%; min-width: 0; }
.fg-lg-9 { flex: 9 1 0%; min-width: 0; }
.fg-lg-10 { flex: 10 1 0%; min-width: 0; }
.fg-lg-11 { flex: 11 1 0%; min-width: 0; }
.fg-lg-12 { flex: 0 0 100%; min-width: 0; width: 100%; max-width: 100%; }

@media only screen and (max-width: 1024px) {
  .fg-md-1 { flex: 1 1 0%; min-width: 0; }
  .fg-md-2 { flex: 2 1 0%; min-width: 0; }
  .fg-md-3 { flex: 3 1 0%; min-width: 0; }
  .fg-md-4 { flex: 4 1 0%; min-width: 0; }
  .fg-md-5 { flex: 5 1 0%; min-width: 0; }
  .fg-md-6 { flex: 6 1 0%; min-width: 0; }
  .fg-md-7 { flex: 7 1 0%; min-width: 0; }
  .fg-md-8 { flex: 8 1 0%; min-width: 0; }
  .fg-md-9 { flex: 9 1 0%; min-width: 0; }
  .fg-md-10 { flex: 10 1 0%; min-width: 0; }
  .fg-md-11 { flex: 11 1 0%; min-width: 0; }
  .fg-md-12 { flex: 0 0 100%; min-width: 0; width: 100%; max-width: 100%; }

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

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

@media only screen and (max-width: 720px) {
  .fg-col.fg-sm-order-first { order: -1; }
  .fg-col.fg-sm-order-last { order: 999; }
  .fg-col.fg-sm-order-none { order: 0; }
  .fg-col.fg-sm-order-1 { order: 1; }
  .fg-col.fg-sm-order-2 { order: 2; }
  .fg-col.fg-sm-order-3 { order: 3; }
  .fg-col.fg-sm-order-4 { order: 4; }
  .fg-col.fg-sm-order-5 { order: 5; }
  .fg-col.fg-sm-order-6 { order: 6; }
  .fg-col.fg-sm-order-7 { order: 7; }
  .fg-col.fg-sm-order-8 { order: 8; }
  .fg-col.fg-sm-order-9 { order: 9; }
  .fg-col.fg-sm-order-10 { order: 10; }
  .fg-col.fg-sm-order-11 { order: 11; }
  .fg-col.fg-sm-order-12 { order: 12; }

  .fg-sm-1 { flex: 1 1 0%; min-width: 0; }
  .fg-sm-2 { flex: 2 1 0%; min-width: 0; }
  .fg-sm-3 { flex: 3 1 0%; min-width: 0; }
  .fg-sm-4 { flex: 4 1 0%; min-width: 0; }
  .fg-sm-5 { flex: 5 1 0%; min-width: 0; }
  .fg-sm-6 { flex: 6 1 0%; min-width: 0; }
  .fg-sm-7 { flex: 7 1 0%; min-width: 0; }
  .fg-sm-8 { flex: 8 1 0%; min-width: 0; }
  .fg-sm-9 { flex: 9 1 0%; min-width: 0; }
  .fg-sm-10 { flex: 10 1 0%; min-width: 0; }
  .fg-sm-11 { flex: 11 1 0%; min-width: 0; }
  .fg-sm-12 { flex: 0 0 100%; min-width: 0; width: 100%; max-width: 100%; }

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