/* 
 * Универсальная система flex позиционирования с автоматическим учетом gap
 * Автор: bfstpars_flex
 * Версия: 2.0
 */

/* Базовый контейнер */
.flex_contain {
  display: flex;
  flex-wrap: wrap; 
  width: 100%;
  box-sizing: border-box;
  --gap: 0px; /* По умолчанию gap = 0 */
}

/* Ограничитель ширины для flex контейнеров */
.flex_limit {
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  --gap: 0px; /* По умолчанию gap = 0 */
}

/* Базовый flex элемент */
.flex_block {
  box-sizing: border-box;
  min-width: 0; /* Предотвращает переполнение */
}  

/* Отступы между элементами с установкой CSS переменной */
.g1 { gap: 1px; --gap: 1px; }
.g2 { gap: 2px; --gap: 2px; }
.g3 { gap: 3px; --gap: 3px; }
.g4 { gap: 4px; --gap: 4px; }
.g5 { gap: 5px; --gap: 5px; }
.g6 { gap: 6px; --gap: 6px; }
.g7 { gap: 7px; --gap: 7px; }
.g8 { gap: 8px; --gap: 8px; }
.g9 { gap: 9px; --gap: 9px; }
.g10 { gap: 10px; --gap: 10px; }
.g11 { gap: 11px; --gap: 11px; }
.g12 { gap: 12px; --gap: 12px; }
.g13 { gap: 13px; --gap: 13px; }
.g14 { gap: 14px; --gap: 14px; }
.g15 { gap: 15px; --gap: 15px; }
.g16 { gap: 16px; --gap: 16px; }
.g17 { gap: 17px; --gap: 17px; }
.g18 { gap: 18px; --gap: 18px; }
.g19 { gap: 19px; --gap: 19px; }
.g20 { gap: 20px; --gap: 20px; }
.g21 { gap: 21px; --gap: 21px; }
.g22 { gap: 22px; --gap: 22px; }
.g23 { gap: 23px; --gap: 23px; }
.g24 { gap: 24px; --gap: 24px; }
.g25 { gap: 25px; --gap: 25px; }
.g26 { gap: 26px; --gap: 26px; }
.g27 { gap: 27px; --gap: 27px; }
.g28 { gap: 28px; --gap: 28px; }
.g29 { gap: 29px; --gap: 29px; }
.g30 { gap: 30px; --gap: 30px; }
.g31 { gap: 31px; --gap: 31px; }
.g32 { gap: 32px; --gap: 32px; }
.g33 { gap: 33px; --gap: 33px; }
.g34 { gap: 34px; --gap: 34px; }
.g35 { gap: 35px; --gap: 35px; }
.g36 { gap: 36px; --gap: 36px; }
.g37 { gap: 37px; --gap: 37px; }
.g38 { gap: 38px; --gap: 38px; }
.g39 { gap: 39px; --gap: 39px; }
.g40 { gap: 40px; --gap: 40px; }
.g41 { gap: 41px; --gap: 41px; }
.g42 { gap: 42px; --gap: 42px; }
.g43 { gap: 43px; --gap: 43px; }
.g44 { gap: 44px; --gap: 44px; }
.g45 { gap: 45px; --gap: 45px; }
.g46 { gap: 46px; --gap: 46px; }
.g47 { gap: 47px; --gap: 47px; }
.g48 { gap: 48px; --gap: 48px; }
.g49 { gap: 49px; --gap: 49px; }
.g50 { gap: 50px; --gap: 50px; }

/* Десктопные классы ширины с автоматическим вычетом gap */
.wf1 { flex: 1; min-width: 1px; }  /* Равные доли - занимает доступное пространство */
.wf2 { flex: 0 0 calc(50% - var(--gap, 0px) / 2); }         /* Половина - 2 элемента, 1 gap */
.wf3 { flex: 0 0 calc(33.333% - var(--gap, 0px) * 2 / 3); } /* Треть - 3 элемента, 2 gap */
.wf4 { flex: 0 0 calc(25% - var(--gap, 0px) * 3 / 4); }     /* Четверть - 4 элемента, 3 gap */
.wf5 { flex: 0 0 calc(20% - var(--gap, 0px) * 4 / 5); }     /* Пятая часть - 5 элементов, 4 gap */
.wf6 { flex: 0 0 calc(16.666% - var(--gap, 0px) * 5 / 6); } /* Шестая часть - 6 элементов, 5 gap */
.wf7 { flex: 0 0 calc(7% - var(--gap, 0px)); }          /* 7% */
.wf8 { flex: 0 0 calc(8% - var(--gap, 0px)); }          /* 8% */
.wf9 { flex: 0 0 calc(9% - var(--gap, 0px)); }          /* 9% */
.wf10 { flex: 0 0 calc(10% - var(--gap, 0px) * 9 / 10); }       /* 10% для сетки 10 элементов */
.wf11 { flex: 0 0 calc(11% - var(--gap, 0px)); }        /* 11% */
.wf12 { flex: 0 0 calc(12% - var(--gap, 0px)); }        /* 12% */
.wf13 { flex: 0 0 calc(13% - var(--gap, 0px)); }        /* 13% */
.wf14 { flex: 0 0 calc(14% - var(--gap, 0px)); }        /* 14% */
.wf15 { flex: 0 0 calc(15% - var(--gap, 0px) * 5 / 6); }    /* 15% для сетки ~6 элементов */
.wf16 { flex: 0 0 calc(16% - var(--gap, 0px)); }        /* 16% */
.wf17 { flex: 0 0 calc(17% - var(--gap, 0px)); }        /* 17% */
.wf18 { flex: 0 0 calc(18% - var(--gap, 0px)); }        /* 18% */
.wf19 { flex: 0 0 calc(19% - var(--gap, 0px)); }        /* 19% */
.wf20 { flex: 0 0 calc(20% - var(--gap, 0px) * 4 / 5); }        /* 20% для сетки 5 элементов */
.wf21 { flex: 0 0 calc(21% - var(--gap, 0px)); }        /* 21% */
.wf22 { flex: 0 0 calc(22% - var(--gap, 0px)); }        /* 22% */
.wf23 { flex: 0 0 calc(23% - var(--gap, 0px)); }        /* 23% */
.wf24 { flex: 0 0 calc(24% - var(--gap, 0px)); }        /* 24% */
.wf25 { flex: 0 0 calc(25% - var(--gap, 0px) * 3 / 4); }        /* 25% для сетки 4 элемента */
.wf26 { flex: 0 0 calc(26% - var(--gap, 0px)); }        /* 26% */
.wf27 { flex: 0 0 calc(27% - var(--gap, 0px)); }        /* 27% */
.wf28 { flex: 0 0 calc(28% - var(--gap, 0px)); }        /* 28% */
.wf29 { flex: 0 0 calc(29% - var(--gap, 0px)); }        /* 29% */
.wf30 { flex: 0 0 calc(30% - var(--gap, 0px) * 2 / 3); }    /* 30% для сетки 3 элемента */
.wf31 { flex: 0 0 calc(31% - var(--gap, 0px)); }        /* 31% */
.wf32 { flex: 0 0 calc(32% - var(--gap, 0px)); }        /* 32% */
.wf33 { flex: 0 0 calc(33% - var(--gap, 0px)); }        /* 33% */
.wf34 { flex: 0 0 calc(34% - var(--gap, 0px)); }        /* 34% */
.wf35 { flex: 0 0 calc(35% - var(--gap, 0px) * 2 / 3); }    /* 35% для гибридных сеток */
.wf36 { flex: 0 0 calc(36% - var(--gap, 0px)); }        /* 36% */
.wf37 { flex: 0 0 calc(37% - var(--gap, 0px)); }        /* 37% */
.wf38 { flex: 0 0 calc(38% - var(--gap, 0px)); }        /* 38% */
.wf39 { flex: 0 0 calc(39% - var(--gap, 0px)); }        /* 39% */
.wf40 { flex: 0 0 calc(40% - var(--gap, 0px) * 2 / 3); }      /* 40% для сетки 40+30+30 */
.wf41 { flex: 0 0 calc(41% - var(--gap, 0px)); }        /* 41% */
.wf42 { flex: 0 0 calc(42% - var(--gap, 0px)); }        /* 42% */
.wf43 { flex: 0 0 calc(43% - var(--gap, 0px)); }        /* 43% */
.wf44 { flex: 0 0 calc(44% - var(--gap, 0px)); }        /* 44% */
.wf45 { flex: 0 0 calc(45% - var(--gap, 0px) / 2); }    /* 45% для сетки 45+55 */
.wf46 { flex: 0 0 calc(46% - var(--gap, 0px)); }        /* 46% */
.wf47 { flex: 0 0 calc(47% - var(--gap, 0px)); }        /* 47% */
.wf48 { flex: 0 0 calc(48% - var(--gap, 0px)); }        /* 48% */
.wf49 { flex: 0 0 calc(49% - var(--gap, 0px)); }        /* 49% */
.wf50 { flex: 0 0 calc(50% - var(--gap, 0px) / 2); }        /* 50% для сетки 2 элемента */
.wf51 { flex: 0 0 calc(51% - var(--gap, 0px)); }        /* 51% */
.wf52 { flex: 0 0 calc(52% - var(--gap, 0px)); }        /* 52% */
.wf53 { flex: 0 0 calc(53% - var(--gap, 0px)); }        /* 53% */
.wf54 { flex: 0 0 calc(54% - var(--gap, 0px)); }        /* 54% */
.wf55 { flex: 0 0 calc(55% - var(--gap, 0px) / 2); }     /* 55% для сетки 55+45 */
.wf56 { flex: 0 0 calc(56% - var(--gap, 0px)); }        /* 56% */
.wf57 { flex: 0 0 calc(57% - var(--gap, 0px)); }        /* 57% */
.wf58 { flex: 0 0 calc(58% - var(--gap, 0px)); }        /* 58% */
.wf59 { flex: 0 0 calc(59% - var(--gap, 0px)); }        /* 59% */
.wf60 { flex: 0 0 calc(60% - var(--gap, 0px) / 2); }     /* 60% для сетки 60+40 */
.wf61 { flex: 0 0 calc(61% - var(--gap, 0px)); }        /* 61% */
.wf62 { flex: 0 0 calc(62% - var(--gap, 0px)); }        /* 62% */
.wf63 { flex: 0 0 calc(63% - var(--gap, 0px)); }        /* 63% */
.wf64 { flex: 0 0 calc(64% - var(--gap, 0px)); }        /* 64% */
.wf65 { flex: 0 0 calc(65% - var(--gap, 0px) / 2); }     /* 65% для сетки 65+35 */
.wf66 { flex: 0 0 calc(66% - var(--gap, 0px)); }        /* 66% */
.wf67 { flex: 0 0 calc(67% - var(--gap, 0px)); }        /* 67% */
.wf68 { flex: 0 0 calc(68% - var(--gap, 0px)); }        /* 68% */
.wf69 { flex: 0 0 calc(69% - var(--gap, 0px)); }        /* 69% */
.wf70 { flex: 0 0 calc(70% - var(--gap, 0px) / 2); }     /* 70% для сетки 70+30 */
.wf71 { flex: 0 0 calc(71% - var(--gap, 0px)); }        /* 71% */
.wf72 { flex: 0 0 calc(72% - var(--gap, 0px)); }        /* 72% */
.wf73 { flex: 0 0 calc(73% - var(--gap, 0px)); }        /* 73% */
.wf74 { flex: 0 0 calc(74% - var(--gap, 0px)); }        /* 74% */
.wf75 { flex: 0 0 calc(75% - var(--gap, 0px) / 2); }     /* 75% для сетки 75+25 */
.wf76 { flex: 0 0 calc(76% - var(--gap, 0px)); }        /* 76% */
.wf77 { flex: 0 0 calc(77% - var(--gap, 0px)); }        /* 77% */
.wf78 { flex: 0 0 calc(78% - var(--gap, 0px)); }        /* 78% */
.wf79 { flex: 0 0 calc(79% - var(--gap, 0px)); }        /* 79% */
.wf80 { flex: 0 0 calc(80% - var(--gap, 0px) / 2); }     /* 80% для сетки 80+20 */
.wf81 { flex: 0 0 calc(81% - var(--gap, 0px)); }        /* 81% */
.wf82 { flex: 0 0 calc(82% - var(--gap, 0px)); }        /* 82% */
.wf83 { flex: 0 0 calc(83% - var(--gap, 0px)); }        /* 83% */
.wf84 { flex: 0 0 calc(84% - var(--gap, 0px)); }        /* 84% */
.wf85 { flex: 0 0 calc(85% - var(--gap, 0px) / 2); }     /* 85% для сетки 85+15 */
.wf86 { flex: 0 0 calc(86% - var(--gap, 0px)); }        /* 86% */
.wf87 { flex: 0 0 calc(87% - var(--gap, 0px)); }        /* 87% */
.wf88 { flex: 0 0 calc(88% - var(--gap, 0px)); }        /* 88% */
.wf89 { flex: 0 0 calc(89% - var(--gap, 0px)); }        /* 89% */
.wf90 { flex: 0 0 calc(90% - var(--gap, 0px) / 2); }     /* 90% для сетки 90+10 */
.wf91 { flex: 0 0 calc(91% - var(--gap, 0px)); }        /* 91% */
.wf92 { flex: 0 0 calc(92% - var(--gap, 0px)); }        /* 92% */
.wf93 { flex: 0 0 calc(93% - var(--gap, 0px)); }        /* 93% */
.wf94 { flex: 0 0 calc(94% - var(--gap, 0px)); }        /* 94% */
.wf95 { flex: 0 0 calc(95% - var(--gap, 0px) / 2); }     /* 95% для сетки 95+5 */
.wf96 { flex: 0 0 calc(96% - var(--gap, 0px)); }        /* 96% */
.wf97 { flex: 0 0 calc(97% - var(--gap, 0px)); }        /* 97% */
.wf98 { flex: 0 0 calc(98% - var(--gap, 0px)); }        /* 98% */
.wf99 { flex: 0 0 calc(99% - var(--gap, 0px)); }        /* 99% */
.wf100 { flex: 0 0 100%; min-width: 100%; }  /* 100% with guaranteed line break */

/* Планшетные классы ширины (max-width: 1000px) */
@media screen and (max-width: 1000px) {
  .tf1 { flex: 1; }               /* Равные доли на планшете */
  .tf2 { flex: 0 0 calc(50% - var(--gap, 0px) / 2); }         /* 50% на планшете */
  .tf3 { flex: 0 0 calc(33.333% - var(--gap, 0px) * 2 / 3); } /* 33.333% на планшете */
  .tf4 { flex: 0 0 calc(25% - var(--gap, 0px) * 3 / 4); }     /* 25% на планшете */
  .tf5 { flex: 0 0 calc(20% - var(--gap, 0px) * 4 / 5); }     /* 20% на планшете */
  .tf6 { flex: 0 0 calc(16.666% - var(--gap, 0px) * 5 / 6); } /* 16.666% на планшете */
  .tf7 { flex: 0 0 calc(7% - var(--gap, 0px)); }          /* 7% на планшете */
  .tf8 { flex: 0 0 calc(8% - var(--gap, 0px)); }          /* 8% на планшете */
  .tf9 { flex: 0 0 calc(9% - var(--gap, 0px)); }          /* 9% на планшете */
  .tf10 { flex: 0 0 calc(10% - var(--gap, 0px) * 9 / 10); }        /* 10% на планшете */
  .tf11 { flex: 0 0 calc(11% - var(--gap, 0px)); }        /* 11% на планшете */
  .tf12 { flex: 0 0 calc(12% - var(--gap, 0px)); }        /* 12% на планшете */
  .tf13 { flex: 0 0 calc(13% - var(--gap, 0px)); }        /* 13% на планшете */
  .tf14 { flex: 0 0 calc(14% - var(--gap, 0px)); }        /* 14% на планшете */
  .tf15 { flex: 0 0 calc(15% - var(--gap, 0px) * 5 / 6); }     /* 15% на планшете */
  .tf16 { flex: 0 0 calc(16% - var(--gap, 0px)); }        /* 16% на планшете */
  .tf17 { flex: 0 0 calc(17% - var(--gap, 0px)); }        /* 17% на планшете */
  .tf18 { flex: 0 0 calc(18% - var(--gap, 0px)); }        /* 18% на планшете */
  .tf19 { flex: 0 0 calc(19% - var(--gap, 0px)); }        /* 19% на планшете */
  .tf20 { flex: 0 0 calc(20% - var(--gap, 0px) * 4 / 5); }         /* 20% на планшете */
  .tf21 { flex: 0 0 calc(21% - var(--gap, 0px)); }        /* 21% на планшете */
  .tf22 { flex: 0 0 calc(22% - var(--gap, 0px)); }        /* 22% на планшете */
  .tf23 { flex: 0 0 calc(23% - var(--gap, 0px)); }        /* 23% на планшете */
  .tf24 { flex: 0 0 calc(24% - var(--gap, 0px)); }        /* 24% на планшете */
  .tf25 { flex: 0 0 calc(25% - var(--gap, 0px) * 3 / 4); }         /* 25% на планшете */
  .tf26 { flex: 0 0 calc(26% - var(--gap, 0px)); }        /* 26% на планшете */
  .tf27 { flex: 0 0 calc(27% - var(--gap, 0px)); }        /* 27% на планшете */
  .tf28 { flex: 0 0 calc(28% - var(--gap, 0px)); }        /* 28% на планшете */
  .tf29 { flex: 0 0 calc(29% - var(--gap, 0px)); }        /* 29% на планшете */
  .tf30 { flex: 0 0 calc(30% - var(--gap, 0px) * 2 / 3); }     /* 30% на планшете */
  .tf31 { flex: 0 0 calc(31% - var(--gap, 0px)); }        /* 31% на планшете */
  .tf32 { flex: 0 0 calc(32% - var(--gap, 0px)); }        /* 32% на планшете */
  .tf33 { flex: 0 0 calc(33% - var(--gap, 0px)); }        /* 33% на планшете */
  .tf34 { flex: 0 0 calc(34% - var(--gap, 0px)); }        /* 34% на планшете */
  .tf35 { flex: 0 0 calc(35% - var(--gap, 0px) * 2 / 3); }     /* 35% на планшете */
  .tf36 { flex: 0 0 calc(36% - var(--gap, 0px)); }        /* 36% на планшете */
  .tf37 { flex: 0 0 calc(37% - var(--gap, 0px)); }        /* 37% на планшете */
  .tf38 { flex: 0 0 calc(38% - var(--gap, 0px)); }        /* 38% на планшете */
  .tf39 { flex: 0 0 calc(39% - var(--gap, 0px)); }        /* 39% на планшете */
  .tf40 { flex: 0 0 calc(40% - var(--gap, 0px) * 2 / 3); }       /* 40% на планшете */
  .tf41 { flex: 0 0 calc(41% - var(--gap, 0px)); }        /* 41% на планшете */
  .tf42 { flex: 0 0 calc(42% - var(--gap, 0px)); }        /* 42% на планшете */
  .tf43 { flex: 0 0 calc(43% - var(--gap, 0px)); }        /* 43% на планшете */
  .tf44 { flex: 0 0 calc(44% - var(--gap, 0px)); }        /* 44% на планшете */
  .tf45 { flex: 0 0 calc(45% - var(--gap, 0px) / 2); }     /* 45% на планшете */
  .tf46 { flex: 0 0 calc(46% - var(--gap, 0px)); }        /* 46% на планшете */
  .tf47 { flex: 0 0 calc(47% - var(--gap, 0px)); }        /* 47% на планшете */
  .tf48 { flex: 0 0 calc(48% - var(--gap, 0px)); }        /* 48% на планшете */
  .tf49 { flex: 0 0 calc(49% - var(--gap, 0px)); }        /* 49% на планшете */
  .tf50 { flex: 0 0 calc(50% - var(--gap, 0px) / 2); }         /* 50% на планшете */
  .tf51 { flex: 0 0 calc(51% - var(--gap, 0px)); }        /* 51% на планшете */
  .tf52 { flex: 0 0 calc(52% - var(--gap, 0px)); }        /* 52% на планшете */
  .tf53 { flex: 0 0 calc(53% - var(--gap, 0px)); }        /* 53% на планшете */
  .tf54 { flex: 0 0 calc(54% - var(--gap, 0px)); }        /* 54% на планшете */
  .tf55 { flex: 0 0 calc(55% - var(--gap, 0px) / 2); }     /* 55% на планшете */
  .tf56 { flex: 0 0 calc(56% - var(--gap, 0px)); }        /* 56% на планшете */
  .tf57 { flex: 0 0 calc(57% - var(--gap, 0px)); }        /* 57% на планшете */
  .tf58 { flex: 0 0 calc(58% - var(--gap, 0px)); }        /* 58% на планшете */
  .tf59 { flex: 0 0 calc(59% - var(--gap, 0px)); }        /* 59% на планшете */
  .tf60 { flex: 0 0 calc(60% - var(--gap, 0px) / 2); }     /* 60% на планшете */
  .tf61 { flex: 0 0 calc(61% - var(--gap, 0px)); }        /* 61% на планшете */
  .tf62 { flex: 0 0 calc(62% - var(--gap, 0px)); }        /* 62% на планшете */
  .tf63 { flex: 0 0 calc(63% - var(--gap, 0px)); }        /* 63% на планшете */
  .tf64 { flex: 0 0 calc(64% - var(--gap, 0px)); }        /* 64% на планшете */
  .tf65 { flex: 0 0 calc(65% - var(--gap, 0px) / 2); }     /* 65% на планшете */
  .tf66 { flex: 0 0 calc(66% - var(--gap, 0px)); }        /* 66% на планшете */
  .tf67 { flex: 0 0 calc(67% - var(--gap, 0px)); }        /* 67% на планшете */
  .tf68 { flex: 0 0 calc(68% - var(--gap, 0px)); }        /* 68% на планшете */
  .tf69 { flex: 0 0 calc(69% - var(--gap, 0px)); }        /* 69% на планшете */
  .tf70 { flex: 0 0 calc(70% - var(--gap, 0px) / 2); }     /* 70% на планшете */
  .tf71 { flex: 0 0 calc(71% - var(--gap, 0px)); }        /* 71% на планшете */
  .tf72 { flex: 0 0 calc(72% - var(--gap, 0px)); }        /* 72% на планшете */
  .tf73 { flex: 0 0 calc(73% - var(--gap, 0px)); }        /* 73% на планшете */
  .tf74 { flex: 0 0 calc(74% - var(--gap, 0px)); }        /* 74% на планшете */
  .tf75 { flex: 0 0 calc(75% - var(--gap, 0px) / 2); }     /* 75% на планшете */
  .tf76 { flex: 0 0 calc(76% - var(--gap, 0px)); }        /* 76% на планшете */
  .tf77 { flex: 0 0 calc(77% - var(--gap, 0px)); }        /* 77% на планшете */
  .tf78 { flex: 0 0 calc(78% - var(--gap, 0px)); }        /* 78% на планшете */
  .tf79 { flex: 0 0 calc(79% - var(--gap, 0px)); }        /* 79% на планшете */
  .tf80 { flex: 0 0 calc(80% - var(--gap, 0px) / 2); }      /* 80% на планшете */
  .tf81 { flex: 0 0 calc(81% - var(--gap, 0px)); }        /* 81% на планшете */
  .tf82 { flex: 0 0 calc(82% - var(--gap, 0px)); }        /* 82% на планшете */
  .tf83 { flex: 0 0 calc(83% - var(--gap, 0px)); }        /* 83% на планшете */
  .tf84 { flex: 0 0 calc(84% - var(--gap, 0px)); }        /* 84% на планшете */
  .tf85 { flex: 0 0 calc(85% - var(--gap, 0px) / 2); }     /* 85% на планшете */
  .tf86 { flex: 0 0 calc(86% - var(--gap, 0px)); }        /* 86% на планшете */
  .tf87 { flex: 0 0 calc(87% - var(--gap, 0px)); }        /* 87% на планшете */
  .tf88 { flex: 0 0 calc(88% - var(--gap, 0px)); }        /* 88% на планшете */
  .tf89 { flex: 0 0 calc(89% - var(--gap, 0px)); }        /* 89% на планшете */
  .tf90 { flex: 0 0 calc(90% - var(--gap, 0px) / 2); }     /* 90% на планшете */
  .tf91 { flex: 0 0 calc(91% - var(--gap, 0px)); }        /* 91% на планшете */
  .tf92 { flex: 0 0 calc(92% - var(--gap, 0px)); }        /* 92% на планшете */
  .tf93 { flex: 0 0 calc(93% - var(--gap, 0px)); }        /* 93% на планшете */
  .tf94 { flex: 0 0 calc(94% - var(--gap, 0px)); }        /* 94% на планшете */
  .tf95 { flex: 0 0 calc(95% - var(--gap, 0px) / 2); }     /* 95% на планшете */
  .tf96 { flex: 0 0 calc(96% - var(--gap, 0px)); }        /* 96% на планшете */
  .tf97 { flex: 0 0 calc(97% - var(--gap, 0px)); }        /* 97% на планшете */
  .tf98 { flex: 0 0 calc(98% - var(--gap, 0px)); }        /* 98% на планшете */
  .tf99 { flex: 0 0 calc(99% - var(--gap, 0px)); }        /* 99% на планшете */
  .tf100 { flex: 0 0 100%; }      /* 100% на планшете */
}

/* Мобильные классы ширины (max-width: 550px) */
@media screen and (max-width: 550px) {
  .mf1 { flex: 1; }               /* Равные доли на мобильном */
  .mf2 { flex: 0 0 calc(50% - var(--gap, 0px) / 2); }         /* 50% на мобильном */
  .mf3 { flex: 0 0 calc(33.333% - var(--gap, 0px) * 2 / 3); } /* 33.333% на мобильном */
  .mf4 { flex: 0 0 calc(25% - var(--gap, 0px) * 3 / 4); }     /* 25% на мобильном */
  .mf5 { flex: 0 0 calc(20% - var(--gap, 0px) * 4 / 5); }     /* 20% на мобильном */
  .mf6 { flex: 0 0 calc(16.666% - var(--gap, 0px) * 5 / 6); } /* 16.666% на мобильном */
  .mf7 { flex: 0 0 calc(7% - var(--gap, 0px)); }          /* 7% на мобильном */
  .mf8 { flex: 0 0 calc(8% - var(--gap, 0px)); }          /* 8% на мобильном */
  .mf9 { flex: 0 0 calc(9% - var(--gap, 0px)); }          /* 9% на мобильном */
  .mf10 { flex: 0 0 calc(10% - var(--gap, 0px) * 9 / 10); }        /* 10% на мобильном */
  .mf11 { flex: 0 0 calc(11% - var(--gap, 0px)); }        /* 11% на мобильном */
  .mf12 { flex: 0 0 calc(12% - var(--gap, 0px)); }        /* 12% на мобильном */
  .mf13 { flex: 0 0 calc(13% - var(--gap, 0px)); }        /* 13% на мобильном */
  .mf14 { flex: 0 0 calc(14% - var(--gap, 0px)); }        /* 14% на мобильном */
  .mf15 { flex: 0 0 calc(15% - var(--gap, 0px) * 5 / 6); }     /* 15% на мобильном */
  .mf16 { flex: 0 0 calc(16% - var(--gap, 0px)); }        /* 16% на мобильном */
  .mf17 { flex: 0 0 calc(17% - var(--gap, 0px)); }        /* 17% на мобильном */
  .mf18 { flex: 0 0 calc(18% - var(--gap, 0px)); }        /* 18% на мобильном */
  .mf19 { flex: 0 0 calc(19% - var(--gap, 0px)); }        /* 19% на мобильном */
  .mf20 { flex: 0 0 calc(20% - var(--gap, 0px) * 4 / 5); }         /* 20% на мобильном */
  .mf21 { flex: 0 0 calc(21% - var(--gap, 0px)); }        /* 21% на мобильном */
  .mf22 { flex: 0 0 calc(22% - var(--gap, 0px)); }        /* 22% на мобильном */
  .mf23 { flex: 0 0 calc(23% - var(--gap, 0px)); }        /* 23% на мобильном */
  .mf24 { flex: 0 0 calc(24% - var(--gap, 0px)); }        /* 24% на мобильном */
  .mf25 { flex: 0 0 calc(25% - var(--gap, 0px) * 3 / 4); }         /* 25% на мобильном */
  .mf26 { flex: 0 0 calc(26% - var(--gap, 0px)); }        /* 26% на мобильном */
  .mf27 { flex: 0 0 calc(27% - var(--gap, 0px)); }        /* 27% на мобильном */
  .mf28 { flex: 0 0 calc(28% - var(--gap, 0px)); }        /* 28% на мобильном */
  .mf29 { flex: 0 0 calc(29% - var(--gap, 0px)); }        /* 29% на мобильном */
  .mf30 { flex: 0 0 calc(30% - var(--gap, 0px) * 2 / 3); }     /* 30% на мобильном */
  .mf31 { flex: 0 0 calc(31% - var(--gap, 0px)); }        /* 31% на мобильном */
  .mf32 { flex: 0 0 calc(32% - var(--gap, 0px)); }        /* 32% на мобильном */
  .mf33 { flex: 0 0 calc(33% - var(--gap, 0px)); }        /* 33% на мобильном */
  .mf34 { flex: 0 0 calc(34% - var(--gap, 0px)); }        /* 34% на мобильном */
  .mf35 { flex: 0 0 calc(35% - var(--gap, 0px) * 2 / 3); }     /* 35% на мобильном */
  .mf36 { flex: 0 0 calc(36% - var(--gap, 0px)); }        /* 36% на мобильном */
  .mf37 { flex: 0 0 calc(37% - var(--gap, 0px)); }        /* 37% на мобильном */
  .mf38 { flex: 0 0 calc(38% - var(--gap, 0px)); }        /* 38% на мобильном */
  .mf39 { flex: 0 0 calc(39% - var(--gap, 0px)); }        /* 39% на мобильном */
  .mf40 { flex: 0 0 calc(40% - var(--gap, 0px) * 2 / 3); }       /* 40% на мобильном */
  .mf41 { flex: 0 0 calc(41% - var(--gap, 0px)); }        /* 41% на мобильном */
  .mf42 { flex: 0 0 calc(42% - var(--gap, 0px)); }        /* 42% на мобильном */
  .mf43 { flex: 0 0 calc(43% - var(--gap, 0px)); }        /* 43% на мобильном */
  .mf44 { flex: 0 0 calc(44% - var(--gap, 0px)); }        /* 44% на мобильном */
  .mf45 { flex: 0 0 calc(45% - var(--gap, 0px) / 2); }     /* 45% на мобильном */
  .mf46 { flex: 0 0 calc(46% - var(--gap, 0px)); }        /* 46% на мобильном */
  .mf47 { flex: 0 0 calc(47% - var(--gap, 0px)); }        /* 47% на мобильном */
  .mf48 { flex: 0 0 calc(48% - var(--gap, 0px)); }        /* 48% на мобильном */
  .mf49 { flex: 0 0 calc(49% - var(--gap, 0px)); }        /* 49% на мобильном */
  .mf50 { flex: 0 0 calc(50% - var(--gap, 0px) / 2); }         /* 50% на мобильном */
  .mf51 { flex: 0 0 calc(51% - var(--gap, 0px)); }        /* 51% на мобильном */
  .mf52 { flex: 0 0 calc(52% - var(--gap, 0px)); }        /* 52% на мобильном */
  .mf53 { flex: 0 0 calc(53% - var(--gap, 0px)); }        /* 53% на мобильном */
  .mf54 { flex: 0 0 calc(54% - var(--gap, 0px)); }        /* 54% на мобильном */
  .mf55 { flex: 0 0 calc(55% - var(--gap, 0px) / 2); }     /* 55% на мобильном */
  .mf56 { flex: 0 0 calc(56% - var(--gap, 0px)); }        /* 56% на мобильном */
  .mf57 { flex: 0 0 calc(57% - var(--gap, 0px)); }        /* 57% на мобильном */
  .mf58 { flex: 0 0 calc(58% - var(--gap, 0px)); }        /* 58% на мобильном */
  .mf59 { flex: 0 0 calc(59% - var(--gap, 0px)); }        /* 59% на мобильном */
  .mf60 { flex: 0 0 calc(60% - var(--gap, 0px) / 2); }     /* 60% на мобильном */
  .mf61 { flex: 0 0 calc(61% - var(--gap, 0px)); }        /* 61% на мобильном */
  .mf62 { flex: 0 0 calc(62% - var(--gap, 0px)); }        /* 62% на мобильном */
  .mf63 { flex: 0 0 calc(63% - var(--gap, 0px)); }        /* 63% на мобильном */
  .mf64 { flex: 0 0 calc(64% - var(--gap, 0px)); }        /* 64% на мобильном */
  .mf65 { flex: 0 0 calc(65% - var(--gap, 0px) / 2); }     /* 65% на мобильном */
  .mf66 { flex: 0 0 calc(66% - var(--gap, 0px)); }        /* 66% на мобильном */
  .mf67 { flex: 0 0 calc(67% - var(--gap, 0px)); }        /* 67% на мобильном */
  .mf68 { flex: 0 0 calc(68% - var(--gap, 0px)); }        /* 68% на мобильном */
  .mf69 { flex: 0 0 calc(69% - var(--gap, 0px)); }        /* 69% на мобильном */
  .mf70 { flex: 0 0 calc(70% - var(--gap, 0px) / 2); }     /* 70% на мобильном */
  .mf71 { flex: 0 0 calc(71% - var(--gap, 0px)); }        /* 71% на мобильном */
  .mf72 { flex: 0 0 calc(72% - var(--gap, 0px)); }        /* 72% на мобильном */
  .mf73 { flex: 0 0 calc(73% - var(--gap, 0px)); }        /* 73% на мобильном */
  .mf74 { flex: 0 0 calc(74% - var(--gap, 0px)); }        /* 74% на мобильном */
  .mf75 { flex: 0 0 calc(75% - var(--gap, 0px) / 2); }     /* 75% на мобильном */
  .mf76 { flex: 0 0 calc(76% - var(--gap, 0px)); }        /* 76% на мобильном */
  .mf77 { flex: 0 0 calc(77% - var(--gap, 0px)); }        /* 77% на мобильном */
  .mf78 { flex: 0 0 calc(78% - var(--gap, 0px)); }        /* 78% на мобильном */
  .mf79 { flex: 0 0 calc(79% - var(--gap, 0px)); }        /* 79% на мобильном */
  .mf80 { flex: 0 0 calc(80% - var(--gap, 0px) / 2); }      /* 80% на мобильном */
  .mf81 { flex: 0 0 calc(81% - var(--gap, 0px)); }        /* 81% на мобильном */
  .mf82 { flex: 0 0 calc(82% - var(--gap, 0px)); }        /* 82% на мобильном */
  .mf83 { flex: 0 0 calc(83% - var(--gap, 0px)); }        /* 83% на мобильном */
  .mf84 { flex: 0 0 calc(84% - var(--gap, 0px)); }        /* 84% на мобильном */
  .mf85 { flex: 0 0 calc(85% - var(--gap, 0px) / 2); }     /* 85% на мобильном */
  .mf86 { flex: 0 0 calc(86% - var(--gap, 0px)); }        /* 86% на мобильном */
  .mf87 { flex: 0 0 calc(87% - var(--gap, 0px)); }        /* 87% на мобильном */
  .mf88 { flex: 0 0 calc(88% - var(--gap, 0px)); }        /* 88% на мобильном */
  .mf89 { flex: 0 0 calc(89% - var(--gap, 0px)); }        /* 89% на мобильном */
  .mf90 { flex: 0 0 calc(90% - var(--gap, 0px) / 2); }     /* 90% на мобильном */
  .mf91 { flex: 0 0 calc(91% - var(--gap, 0px)); }        /* 91% на мобильном */
  .mf92 { flex: 0 0 calc(92% - var(--gap, 0px)); }        /* 92% на мобильном */
  .mf93 { flex: 0 0 calc(93% - var(--gap, 0px)); }        /* 93% на мобильном */
  .mf94 { flex: 0 0 calc(94% - var(--gap, 0px)); }        /* 94% на мобильном */
  .mf95 { flex: 0 0 calc(95% - var(--gap, 0px) / 2); }     /* 95% на мобильном */
  .mf96 { flex: 0 0 calc(96% - var(--gap, 0px)); }        /* 96% на мобильном */
  .mf97 { flex: 0 0 calc(97% - var(--gap, 0px)); }        /* 97% на мобильном */
  .mf98 { flex: 0 0 calc(98% - var(--gap, 0px)); }        /* 98% на мобильном */
  .mf99 { flex: 0 0 calc(99% - var(--gap, 0px)); }        /* 99% на мобильном */
  .mf100 { flex: 0 0 100%; }      /* 100% на мобильном */
}

/* Дополнительные утилиты */
.flex_wrap { flex-wrap: wrap; }
.flex_nowrap { flex-wrap: nowrap; }
.flex_column { flex-direction: column; }
.flex_row { flex-direction: row; }

/* Utility class for forcing line breaks in flex layouts */
.flex_break {
  flex-basis: 100% !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Комбинированные классы выравнивания */
.flex_center { align-items: center; justify-content: center; }
.flex_start { align-items: flex-start; justify-content: flex-start; }
.flex_end { align-items: flex-end; justify-content: flex-end; }
.flex_between { justify-content: space-between; }
.flex_around { justify-content: space-around; }
.flex_evenly { justify-content: space-evenly; }

/* Выравнивание по главной оси (горизонтально) */
.justify_start { justify-content: flex-start; }
.justify_center { justify-content: center; }
.justify_end { justify-content: flex-end; }
.justify_between { justify-content: space-between; }
.justify_around { justify-content: space-around; }
.justify_evenly { justify-content: space-evenly; }

/* Выравнивание по поперечной оси (вертикально) */
.align_start { align-items: flex-start; }
.align_center { align-items: center; }
.align_end { align-items: flex-end; }
.align_stretch { align-items: stretch; }
.align_baseline { align-items: baseline; }

/* Выравнивание содержимого при переносе */
.content_start { align-content: flex-start; }
.content_center { align-content: center; }
.content_end { align-content: flex-end; }
.content_between { align-content: space-between; }
.content_around { align-content: space-around; }
.content_stretch { align-content: stretch; }

/* Универсальные короткие классы выравнивания */

/* Justify-content (горизонтальное выравнивание) */
.jc_s { justify-content: flex-start; }    /* start/left */
.jc_c { justify-content: center; }        /* center */
.jc_e { justify-content: flex-end; }      /* end/right */
.jc_b { justify-content: space-between; } /* between */
.jc_a { justify-content: space-around; }  /* around */
.jc_v { justify-content: space-evenly; }  /* evenly */

/* Align-items (вертикальное выравнивание) */
.ai_t { align-items: flex-start; }  /* top */
.ai_c { align-items: center; }      /* center */
.ai_b { align-items: flex-end; }    /* bottom */
.ai_s { align-items: stretch; }     /* stretch */
.ai_l { align-items: baseline; }    /* baseline (line) */

/* Align-content (выравнивание строк при переносе) */
.ac_t { align-content: flex-start; }    /* top */
.ac_c { align-content: center; }        /* center */
.ac_b { align-content: flex-end; }      /* bottom */
.ac_sb { align-content: space-between; } /* space-between */
.ac_sa { align-content: space-around; }  /* space-around */
.ac_s { align-content: stretch; }       /* stretch */

/* Дополнительные стили компонентов */
.flex_header {
	order: -1;
}

/* Shrink-to-fit modifier: make container size to its content while keeping flex rows */
.wfit {
	display: inline-flex;
	flex-wrap: wrap;
	width: max-content;
	max-width: 100%;
}

/* When combined with .flex_contain, override its default width:100% */
.flex_contain.wfit {
	width: max-content;
}

/* Generic inline flex row that sizes to content, useful inside wfit */
.flex_row {
	display: inline-flex;
	flex-wrap: wrap;
	width: max-content;
	max-width: 100%;
}

/* Inside shrink-to-fit contexts, avoid growing "auto shares" to prevent width inflation */
.wfit .wf1,
.wfit .tf1,
.wfit .mf1 {
	flex: 0 1 auto;
}