fix

assets/flex-kit/flex-cell.css

@@ -0,0 +1,412 @@
+
+:root {
+    --flex-padding: 15px 15px;
+    --flex-line-count: 1;
+    --flex-col-count: 2;
+}
+.flex-line > *,
+.flex-col > *,
+.flex-line-wrap > *,
+.flex-col-wrap > *,
+.flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
+.flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
+.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
+.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child
+{
+    padding: var(--flex-padding);
+    box-sizing: border-box;
+}
+
+/* деф настрйоки для ячейки */
+.flex-line > *,
+.flex-line-wrap > *,
+.flex-col > *,
+.flex-col-wrap > *,
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
+.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
+{
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-content: stretch;
+    -ms-flex-line-pack: stretch;
+    align-content: stretch;
+
+    -webkit-box-flex: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+
+    -ms-flex-preferred-size: auto;
+    -webkit-flex-basis: auto;
+    flex-basis: auto;
+}
+
+.flex-line > .flex-line,
+.flex-line > .flex-col,
+.flex-line > .flex-col-wrap,
+.flex-line > .flex-line-wrap,
+
+.flex-col > .flex-line,
+.flex-col > .flex-col,
+.flex-col > .flex-col-wrap,
+.flex-col > .flex-line-wrap,
+
+.flex-line-wrap > .flex-line,
+.flex-line-wrap > .flex-col,
+.flex-line-wrap > .flex-col-wrap,
+.flex-line-wrap > .flex-line-wrap,
+
+.flex-col-wrap > .flex-line,
+.flex-col-wrap > .flex-col,
+.flex-col-wrap > .flex-col-wrap,
+.flex-col-wrap > .flex-line-wrap
+{
+    -ms-flex-preferred-size: 0;
+    -webkit-flex-basis: 0;
+    flex-basis: 0;
+}
+
+/*.flex-line > .flex-line,*/
+/*.flex-line > .flex-col,*/
+/*.flex-line > .flex-col-wrap,*/
+.flex-line > .flex-line-wrap:not(.flex-cell-full-content),
+
+.flex-col > .flex-line:not(.flex-cell-full-content),
+.flex-col > .flex-col:not(.flex-cell-full-content),
+    /*.flex-col > .flex-col-wrap,*/
+.flex-col > .flex-line-wrap:not(.flex-cell-full-content),
+
+.flex-line-wrap > .flex-line:not(.flex-cell-full-content),
+    /*.flex-line-wrap > .flex-col,*/
+    /*.flex-line-wrap > .flex-col-wrap,*/
+.flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content),
+
+.flex-col-wrap > .flex-line:not(.flex-cell-full-content),
+    /*.flex-col-wrap > .flex-col,*/
+    /*.flex-col-wrap > .flex-col-wrap,*/
+.flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content)
+{
+    -ms-flex-preferred-size: auto;
+    -webkit-flex-basis: auto;
+    flex-basis: auto;
+}
+
+
+
+.flex-col > *,
+.flex-col-wrap > *,
+.flex-line > *,
+.flex-line-wrap > *,
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
+.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
+{
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    max-width: 100%;
+}
+
+
+
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child)
+{
+    display: none;
+}
+
+.flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty {
+    /*display: none !important;*/
+}
+
+
+.flex-col,
+.flex-col-wrap,
+.flex-line,
+.flex-line-wrap
+{
+    /*width: 100%;*/
+    padding: 0 !important;
+
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+
+    -webkit-align-content: stretch;
+    -ms-flex-line-pack: stretch;
+    align-content: stretch;
+
+    -webkit-align-items: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+}
+
+.flex-col, .flex-col-wrap {
+    -webkit-align-content: flex-start;
+    -ms-flex-line-pack: start;
+    align-content: flex-start;
+}
+.flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap  {
+    -webkit-box-flex: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+
+    -ms-flex-preferred-size: auto;
+    -webkit-flex-basis: auto;
+    flex-basis: auto;
+}
+
+.flex-col, .flex-col-wrap {
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+.flex-line, .flex-line-wrap {
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+}
+/* flex-wrap: nowrap */
+.flex-col,
+.flex-line {
+    -webkit-flex-wrap: nowrap;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+.flex-line-wrap, .flex-col-wrap
+{
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+.flex-cell
+{
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    /*-webkit-flex-direction: column;*/
+    /*-ms-flex-direction: column;*/
+    /*flex-direction: column;*/
+    /*-webkit-flex-wrap: nowrap;*/
+    /*-ms-flex-wrap: nowrap;*/
+    /*flex-wrap: nowrap;*/
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-align-content: stretch;
+    -ms-flex-line-pack: stretch;
+    align-content: stretch;
+
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+
+    -webkit-box-flex: 0;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+
+    -ms-flex-preferred-size: auto;
+    -webkit-flex-basis: auto;
+    flex-basis: auto;
+}
+
+
+
+
+
+
+/* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */
+.flex-align-start {
+    -webkit-justify-content: flex-start !important;
+    -ms-flex-pack: start !important;
+    justify-content: flex-start !important;
+}
+.flex-align-end {
+    -webkit-justify-content: flex-end !important;
+    -ms-flex-pack: end !important;
+    justify-content: flex-end !important;
+}
+.flex-align-center {
+    -webkit-justify-content: center !important;
+    -ms-flex-pack: center !important;
+    justify-content: center !important;
+}
+.flex-align-around {
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+}
+
+/* попереное */
+.flex-align--stretch {
+    -webkit-align-items: stretch;
+    -ms-flex-align: stretch;
+    align-items: stretch;
+}
+.flex-align--center {
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+
+.flex-cells-v-align--start > *{
+    justify-content: start;
+}
+.flex-cells-v-align--end > *{
+    justify-content: end;
+}
+.flex-cells-v-align--stretch > *{
+    justify-content: stretch;
+}
+.flex-cells-g-align--start > *{
+    align-items: start;
+}
+.flex-cells-g-align--end > *{
+    align-items: end;
+}
+.flex-cells-g-align--stretch > *{
+    align-items: stretch;
+}
+
+/* применяем к ячейкам: поперечное выравнивание */
+.flex-cell-align--start {
+    -webkit-align-self: flex-start;
+    -ms-flex-item-align: start;
+    align-self: flex-start;
+}
+.flex-cell-align--end {
+    -webkit-align-self: flex-end;
+    -ms-flex-item-align: end;
+    align-self: flex-end;
+}
+.flex-cell-align--center {
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
+    align-self: center;
+}
+.flex-cell-align--stretch {
+    -webkit-align-self: stretch;
+    -ms-flex-item-align: stretch;
+    align-self: stretch;
+}
+
+
+.flex-wrap
+{
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+/* применяем к ячейке определяя макс возможное заполнение*/
+.flex-cell-full-content {
+    -ms-flex-positive: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+}
+
+.flex-cell-fill {
+    -ms-flex-negative: 1;
+    flex-shrink: 1;
+
+    -ms-flex-positive: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    flex-basis: auto;
+}
+
+.flex-box-fill > * {
+    -ms-flex-negative: 1;
+    flex-shrink: 1;
+
+    -ms-flex-positive: 1;
+    -webkit-box-flex: 1;
+    flex-grow: 1;
+    flex-basis: auto;
+}
+
+
+
+
+.flex-col-count {
+
+}
+
+@supports (--flex-col-count:property) {
+    .flex-col-count > * {
+        width: calc(100% / (var(--flex-col-count)));
+        max-width: calc(100% / (var(--flex-col-count)));
+        box-sizing: border-box;
+    }
+
+    .flex-line-wrap.flex-col-count > *,
+    .flex-line.flex-col-count > *
+    {
+        -ms-flex-preferred-size: calc(100% / var(--flex-col-count));
+        -webkit-flex-basis: calc(100% / var(--flex-col-count));
+        flex-basis: calc(100% / var(--flex-col-count));
+        box-sizing: border-box;
+    }
+}
+
+
+.flex-col-count.flex-col-without-frame {
+
+}
+
+.flex-line-count {
+
+}
+@supports (--flex-line-count:property) {
+    .flex-col-wrap.flex-line-count > *,
+    .flex-col.flex-line-count > *
+    {
+        -ms-flex-preferred-size: calc(100% / (var(--flex-line-count)));
+        -webkit-flex-basis: calc(100% / (var(--flex-line-count)));
+        flex-basis: calc(100% / (var(--flex-line-count)));
+        box-sizing: border-box;
+    }
+}
+
+
+.flex-cell-aspect-auto {
+    flex-grow: 1000;
+    flex-shrink: 1;
+}
+
+
+.col-count:not(.slick-slider) {
+    position: relative;
+    margin-left: calc(var(--gap) / -2) !important;
+    margin-right: calc(var(--gap) / -2) !important;
+}
+.col-count:not(.slick-slider) > * {
+    width: calc(100% / var(--col-count)) !important;
+    max-width: calc(100% / var(--col-count)) !important;
+    flex-basis: calc(100% / var(--col-count)) !important;
+    padding-left: calc(var(--gap) / 2);
+    padding-right: calc(var(--gap) / 2);
+    padding-bottom: var(--gap);
+}

assets/flex-kit/flex-cell.min.css

@@ -0,0 +1 @@
+:root{--flex-padding:15px 15px;--flex-line-count:1;--flex-col-count:2}.flex-line>*,.flex-col>*,.flex-line-wrap>*,.flex-col-wrap>*,.flex-line.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child{padding:var(--flex-padding);box-sizing:border-box}.flex-line>*,.flex-line-wrap>*,.flex-col>*,.flex-col-wrap>*,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child{flex-flow:column;flex:none;-webkit-flex-basis:auto;align-content:stretch;justify-content:center;display:flex}.flex-line>.flex-line,.flex-line>.flex-col,.flex-line>.flex-col-wrap,.flex-line>.flex-line-wrap,.flex-col>.flex-line,.flex-col>.flex-col,.flex-col>.flex-col-wrap,.flex-col>.flex-line-wrap,.flex-line-wrap>.flex-line,.flex-line-wrap>.flex-col,.flex-line-wrap>.flex-col-wrap,.flex-line-wrap>.flex-line-wrap,.flex-col-wrap>.flex-line,.flex-col-wrap>.flex-col,.flex-col-wrap>.flex-col-wrap,.flex-col-wrap>.flex-line-wrap{flex-basis:0}.flex-line>.flex-line-wrap:not(.flex-cell-full-content),.flex-col>.flex-line:not(.flex-cell-full-content),.flex-col>.flex-col:not(.flex-cell-full-content),.flex-col>.flex-line-wrap:not(.flex-cell-full-content),.flex-line-wrap>.flex-line:not(.flex-cell-full-content),.flex-line-wrap>.flex-line-wrap:not(.flex-cell-full-content),.flex-col-wrap>.flex-line:not(.flex-cell-full-content),.flex-col-wrap>.flex-line-wrap:not(.flex-cell-full-content){flex-basis:auto}.flex-col>*,.flex-col-wrap>*,.flex-line>*,.flex-line-wrap>*,.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:first-child,.flex-aspect-ratio.owl-loaded>.owl-stage-outer>.owl-stage>.owl-item>:not(.flex-cell-aspect-auto)>:first-child{align-items:center;max-width:100%}.flex-aspect-ratio:not(.owl-loaded)>:not(.flex-cell-aspect-auto)>:not(:first-child){display:none}.flex-col,.flex-col-wrap,.flex-line,.flex-line-wrap{align-content:stretch;justify-content:flex-start;align-items:stretch;display:flex;padding:0!important}.flex-col,.flex-col-wrap{align-content:flex-start}.flex-col,.flex-line,.flex-line-wrap,.flex-col-wrap{flex:none;-webkit-flex-basis:auto}.flex-col,.flex-col-wrap{flex-direction:column}.flex-line,.flex-line-wrap{flex-direction:row}.flex-col,.flex-line{flex-wrap:nowrap}.flex-line-wrap,.flex-col-wrap{flex-wrap:wrap}.flex-cell{flex:none;-webkit-flex-basis:auto;align-content:stretch;justify-content:center;align-items:center;display:flex}.flex-align-start{justify-content:flex-start!important}.flex-align-end{justify-content:flex-end!important}.flex-align-center{justify-content:center!important}.flex-align-around{justify-content:space-around}.flex-align--stretch{align-items:stretch}.flex-align--center{align-items:center}.flex-cells-v-align--start>*{justify-content:start}.flex-cells-v-align--end>*{justify-content:end}.flex-cells-v-align--stretch>*{justify-content:stretch}.flex-cells-g-align--start>*{align-items:start}.flex-cells-g-align--end>*{align-items:end}.flex-cells-g-align--stretch>*{align-items:stretch}.flex-cell-align--start{align-self:flex-start}.flex-cell-align--end{align-self:flex-end}.flex-cell-align--center{align-self:center}.flex-cell-align--stretch{align-self:stretch}.flex-wrap{flex-wrap:wrap}.flex-cell-full-content{flex-grow:1}.flex-cell-fill,.flex-box-fill>*{flex:auto}@supports (--flex-col-count:property){.flex-col-count>*{width:calc(100% / (var(--flex-col-count)));max-width:calc(100% / (var(--flex-col-count)));box-sizing:border-box}.flex-line-wrap.flex-col-count>*,.flex-line.flex-col-count>*{-ms-flex-preferred-size:calc(100% / var(--flex-col-count));-webkit-flex-basis:calc(100% / var(--flex-col-count));flex-basis:calc(100% / var(--flex-col-count));box-sizing:border-box}}@supports (--flex-line-count:property){.flex-col-wrap.flex-line-count>*,.flex-col.flex-line-count>*{-ms-flex-preferred-size:calc(100% / (var(--flex-line-count)));-webkit-flex-basis:calc(100% / (var(--flex-line-count)));flex-basis:calc(100% / (var(--flex-line-count)));box-sizing:border-box}}.flex-cell-aspect-auto{flex-grow:1000;flex-shrink:1}.col-count:not(.slick-slider){position:relative;margin-left:calc(var(--gap) / -2)!important;margin-right:calc(var(--gap) / -2)!important}.col-count:not(.slick-slider)>*{padding-left:calc(var(--gap) / 2);padding-right:calc(var(--gap) / 2);padding-bottom:var(--gap);width:calc(100% / var(--col-count))!important;max-width:calc(100% / var(--col-count))!important;flex-basis:calc(100% / var(--col-count))!important}

assets/flex-kit/flex-kit.css

@@ -1,11 +1,13 @@
 /* flex-kit.css */
 * {
     /*outline: none;*/
-    /*margin: 0;*/
-    /*padding: 0;*/
 }
+
+script, style {
+    display: none !important;
+}
+
 :root {
-    --flex-padding: 15px 15px;
     --gap: 10px;
     --gap-section: 30px;
     --gap-wrapper: 30px;
@@ -14,8 +16,6 @@
     --line-clamp-height: 1.3em;
     --width-wrapper: 1200px;
     --flex-aspect-ratio: 1;
-    --flex-line-count: 1;
-    --flex-col-count: 2;
     --aspect-ratio: 1;
     --font-ratio-height: 0.9;
     --font-ratio-bottom: 0.1;
@@ -40,19 +40,6 @@
     position: relative;
     margin-bottom: var(--gap-section);
 }
-.col-count:not(.slick-slider) {
-    position: relative;
-    margin-left: calc(var(--gap) / -2) !important;
-    margin-right: calc(var(--gap) / -2) !important;
-}
-.col-count:not(.slick-slider) > * {
-    width: calc(100% / var(--col-count)) !important;
-    max-width: calc(100% / var(--col-count)) !important;
-    flex-basis: calc(100% / var(--col-count)) !important;
-    padding-left: calc(var(--gap) / 2);
-    padding-right: calc(var(--gap) / 2);
-    padding-bottom: var(--gap);
-}
 
 .kit-line-clamp {
     line-height: var(--line-clamp-height);
@@ -133,27 +120,6 @@
     width: 0;
     flex: 1 0 0;
 }
-
-.flex-center {
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-align-content: stretch;
-    -ms-flex-line-pack: stretch;
-    align-content: stretch;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
 .flex-list--static {
     --line-count: 1;
 }
@@ -162,468 +128,72 @@
     max-height: var(--line-height) !important;
 }
 
-script, style {
+/* .flex-aspect-ratio */
-    display: none !important;
-}
 
-.flex-line > *,
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img
-.flex-col > *,
-.flex-line-wrap > *,
-.flex-col-wrap > *,
-.flex-line.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
-.flex-col.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
-.flex-line-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
-.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child
 {
-    padding: var(--flex-padding);
-    box-sizing: border-box;
-}
-
-.flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child,
-.flex-list-item.aspect-ratio > :first-child
-{
-    padding: 0 calc(var(--gap) / 2);
-}
-
-/* деф настрйоки для ячейки */
-.flex-line > *,
-.flex-line-wrap > *,
-.flex-col > *,
-.flex-col-wrap > *,
-.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
-.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
-{
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-    -webkit-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-align-content: stretch;
-    -ms-flex-line-pack: stretch;
-    align-content: stretch;
-
-    -webkit-box-flex: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-
-    -ms-flex-preferred-size: auto;
-    -webkit-flex-basis: auto;
-    flex-basis: auto;
-}
-
-.flex-line > .flex-line,
-.flex-line > .flex-col,
-.flex-line > .flex-col-wrap,
-.flex-line > .flex-line-wrap,
-
-.flex-col > .flex-line,
-.flex-col > .flex-col,
-.flex-col > .flex-col-wrap,
-.flex-col > .flex-line-wrap,
-
-.flex-line-wrap > .flex-line,
-.flex-line-wrap > .flex-col,
-.flex-line-wrap > .flex-col-wrap,
-.flex-line-wrap > .flex-line-wrap,
-
-.flex-col-wrap > .flex-line,
-.flex-col-wrap > .flex-col,
-.flex-col-wrap > .flex-col-wrap,
-.flex-col-wrap > .flex-line-wrap
-{
-    -ms-flex-preferred-size: 0;
-    -webkit-flex-basis: 0;
-    flex-basis: 0;
-}
-
-/*.flex-line > .flex-line,*/
-/*.flex-line > .flex-col,*/
-/*.flex-line > .flex-col-wrap,*/
-.flex-line > .flex-line-wrap:not(.flex-cell-full-content),
-
-.flex-col > .flex-line:not(.flex-cell-full-content),
-.flex-col > .flex-col:not(.flex-cell-full-content),
-    /*.flex-col > .flex-col-wrap,*/
-.flex-col > .flex-line-wrap:not(.flex-cell-full-content),
-
-.flex-line-wrap > .flex-line:not(.flex-cell-full-content),
-    /*.flex-line-wrap > .flex-col,*/
-    /*.flex-line-wrap > .flex-col-wrap,*/
-.flex-line-wrap > .flex-line-wrap:not(.flex-cell-full-content),
-
-.flex-col-wrap > .flex-line:not(.flex-cell-full-content),
-    /*.flex-col-wrap > .flex-col,*/
-    /*.flex-col-wrap > .flex-col-wrap,*/
-.flex-col-wrap > .flex-line-wrap:not(.flex-cell-full-content)
-{
-    -ms-flex-preferred-size: auto;
-    -webkit-flex-basis: auto;
-    flex-basis: auto;
-}
-
-
-
-.flex-col > *,
-.flex-col-wrap > *,
-.flex-line > *,
-.flex-line-wrap > *,
-.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
-.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
-{
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-
-    max-width: 100%;
-}
-
-
-
-.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > *:not(:first-child)
-{
-    display: none;
-}
-
-.flex-line:not(.flex-cell) > *:empty, .flex-col:not(.flex-cell) > *:empty, .flex-cell:empty {
-    /*display: none !important;*/
-}
-
-
-.flex-col,
-.flex-col-wrap,
-.flex-line,
-.flex-line-wrap
-{
-    /*width: 100%;*/
-    padding: 0 !important;
-
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-
-    -webkit-justify-content: flex-start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-
-    -webkit-align-content: stretch;
-    -ms-flex-line-pack: stretch;
-    align-content: stretch;
-
-    -webkit-align-items: stretch;
-    -ms-flex-align: stretch;
-    align-items: stretch;
-}
-
-.flex-col, .flex-col-wrap {
-    -webkit-align-content: flex-start;
-    -ms-flex-line-pack: start;
-    align-content: flex-start;
-}
-.flex-col, .flex-line, .flex-line-wrap, .flex-col-wrap  {
-    -webkit-box-flex: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-
-    -ms-flex-preferred-size: auto;
-    -webkit-flex-basis: auto;
-    flex-basis: auto;
-}
-
-.flex-col, .flex-col-wrap {
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-}
-.flex-line, .flex-line-wrap {
-    -webkit-flex-direction: row;
-    -ms-flex-direction: row;
-    flex-direction: row;
-}
-/* flex-wrap: nowrap */
-.flex-col,
-.flex-line {
-    -webkit-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-}
-.flex-line-wrap, .flex-col-wrap
-{
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-}
-.flex-cell
-{
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    /*-webkit-flex-direction: column;*/
-    /*-ms-flex-direction: column;*/
-    /*flex-direction: column;*/
-    /*-webkit-flex-wrap: nowrap;*/
-    /*-ms-flex-wrap: nowrap;*/
-    /*flex-wrap: nowrap;*/
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-    -webkit-align-content: stretch;
-    -ms-flex-line-pack: stretch;
-    align-content: stretch;
-
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-
-    -webkit-box-flex: 0;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-
-    -ms-flex-preferred-size: auto;
-    -webkit-flex-basis: auto;
-    flex-basis: auto;
-}
-
-
-
-
-
-
-/* применяем к таблице: ПРОДОЛЬНОЕ выравнивание элементов в строке или колонке */
-.flex-align-start {
-    -webkit-justify-content: flex-start !important;
-    -ms-flex-pack: start !important;
-    justify-content: flex-start !important;
-}
-.flex-align-end {
-    -webkit-justify-content: flex-end !important;
-    -ms-flex-pack: end !important;
-    justify-content: flex-end !important;
-}
-.flex-align-center {
-    -webkit-justify-content: center !important;
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
-}
-.flex-align-around {
-    -webkit-justify-content: space-around;
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-}
-
-/* попереное */
-.flex-align--stretch {
-    -webkit-align-items: stretch;
-    -ms-flex-align: stretch;
-    align-items: stretch;
-}
-.flex-align--center {
-    -webkit-align-items: center;
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-.flex-cells-v-align--start > *{
-    justify-content: start;
-}
-.flex-cells-v-align--end > *{
-    justify-content: end;
-}
-.flex-cells-v-align--stretch > *{
-    justify-content: stretch;
-}
-.flex-cells-g-align--start > *{
-    align-items: start;
-}
-.flex-cells-g-align--end > *{
-    align-items: end;
-}
-.flex-cells-g-align--stretch > *{
-    align-items: stretch;
-}
-
-/* применяем к ячейкам: поперечное выравнивание */
-.flex-cell-align--start {
-    -webkit-align-self: flex-start;
-    -ms-flex-item-align: start;
-    align-self: flex-start;
-}
-.flex-cell-align--end {
-    -webkit-align-self: flex-end;
-    -ms-flex-item-align: end;
-    align-self: flex-end;
-}
-.flex-cell-align--center {
-    -webkit-align-self: center;
-    -ms-flex-item-align: center;
-    align-self: center;
-}
-.flex-cell-align--stretch {
-    -webkit-align-self: stretch;
-    -ms-flex-item-align: stretch;
-    align-self: stretch;
-}
-
-
-.flex-wrap
-{
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-}
-
-/* применяем к ячейке определяя макс возможное заполнение*/
-.flex-cell-full-content {
-    -ms-flex-positive: 1;
-    -webkit-box-flex: 1;
-    flex-grow: 1;
-}
-
-.flex-cell-fill {
-    -ms-flex-negative: 1;
-    flex-shrink: 1;
-
-    -ms-flex-positive: 1;
-    -webkit-box-flex: 1;
-    flex-grow: 1;
-    flex-basis: auto;
-}
-
-.flex-box-fill > * {
-    -ms-flex-negative: 1;
-    flex-shrink: 1;
-
-    -ms-flex-positive: 1;
-    -webkit-box-flex: 1;
-    flex-grow: 1;
-    flex-basis: auto;
-}
-
-
-.flex-col-count {
-
-}
-
-@supports (--flex-col-count:property) {
-    .flex-col-count > * {
-        width: calc(100% / (var(--flex-col-count)));
-        max-width: calc(100% / (var(--flex-col-count)));
-        box-sizing: border-box;
-    }
-
-    .flex-line-wrap.flex-col-count > *,
-    .flex-line.flex-col-count > *
-    {
-        -ms-flex-preferred-size: calc(100% / var(--flex-col-count));
-        -webkit-flex-basis: calc(100% / var(--flex-col-count));
-        flex-basis: calc(100% / var(--flex-col-count));
-        box-sizing: border-box;
-    }
-}
-
-
-.flex-col-count.flex-col-without-frame {
-
-}
-
-.flex-line-count {
-
-}
-@supports (--flex-line-count:property) {
-    .flex-col-wrap.flex-line-count > *,
-    .flex-col.flex-line-count > *
-    {
-        -ms-flex-preferred-size: calc(100% / (var(--flex-line-count)));
-        -webkit-flex-basis: calc(100% / (var(--flex-line-count)));
-        flex-basis: calc(100% / (var(--flex-line-count)));
-        box-sizing: border-box;
-    }
-}
-
-
-.flex-cell-aspect-auto {
-    flex-grow: 1000;
-    flex-shrink: 1;
-}
-
-@supports (--flex-aspect-ratio:property) {
-
-    .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > img
-    {
     height: auto;
     object-fit: contain;
-    }
+}
 
-    .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto),
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto),
-    .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)
+.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)
-    {
+{
     position: relative;
     padding: 0;
-    }
+}
 
-    .flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before,
+.flex-aspect-ratio:not(.owl-loaded):not(.flex-list) > *:not(.flex-cell-aspect-auto)::before,
-    .flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
+.flex-aspect-ratio.owl-loaded:not(.flex-list) > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
-    {
+{
     content: "";
     display: block;
     width: 100%;
     padding-bottom: calc(100% / (var(--flex-aspect-ratio)));
-    }
+}
 
-    .flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before
+.flex-aspect-ratio.flex-list:not(.owl-loaded) > *:not(.flex-cell-aspect-auto)::before
-    {
+{
     content: "";
     display: block;
     width: 100%;
-        padding-bottom: calc((100% / var(--col-span) - var(--gap)) / var(--flex-aspect-ratio));
+    padding-bottom: calc((100% / var(--col-span, 1) - 0 * var(--gap, 10px)) / var(--flex-aspect-ratio));
-    }
+}
 
-    .flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
+.flex-aspect-ratio.flex-list.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto)::before
-    {
+{
     content: "";
     display: block;
     width: 100%;
     padding-bottom: calc(100% / (var(--flex-aspect-ratio)));
-    }
+}
 
-    .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child,
-    .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
+.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child
-    {
+{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     object-fit: contain;
-    }
+}
-    .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture,
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture,
-    .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture {
+.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture {
     width: 100%;
     height: 100%;
-    }
+}
-    .flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img,
+.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child > picture > img,
-    .flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img {
+.flex-aspect-ratio.owl-loaded > .owl-stage-outer > .owl-stage > .owl-item > *:not(.flex-cell-aspect-auto) > :first-child > picture > img {
     object-fit: contain;
     width: 100%;
     height: 100%;
-    }
+}
 
+.flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child,
+.flex-list-item.aspect-ratio > :first-child
+{
+    padding: calc(var(--gap) / 2);
 }
 
 
@@ -645,6 +215,7 @@ script, style {
         display: block;
         width: 100%;
         padding-bottom: calc(100% / (var(--aspect-ratio)));
+        pointer-events: none;
     }
     .aspect-ratio > :first-child {
         width: 100%;
@@ -656,273 +227,6 @@ script, style {
     }
 }
 
-
-
-/* flex-marginator */
-
-
-:root {
-    --flex-marginator: 15px;
-    --flex-marginator-index: 0;
-}
-
-.flex-marginator {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--flex-marginator);
-}
-
-.flex-marginator > *:empty {
-    display:none;
-}
-
-
-/* flex-delimiter text */
-
-:root {
-    --flex-delimiter: ', ';
-    --flex-delimiter-index: 0;
-}
-
-.flex-delimiter > *:not(:first-child):not(:empty)::before {
-    content: var(--flex-delimiter);
-    --flex-delimiter-index:1;
-}
-
-.flex-delimiter > *:empty + *:not(:empty)::before
-{
-    content: '';
-    --flex-delimiter-index:0;
-}
-
-.flex-delimiter > *:not(:empty) ~ *:empty + *:not(:empty)::before
-{
-    content: var(--flex-delimiter);
-    --flex-delimiter-index:1;
-}
-
-.flex-delimiter > *:empty {
-    display:none;
-}
-
-/* flex-card */
-
-.flex-card {
-    --aspect-ratio: calc(200 / 300);
-    --gap-inner: 10px;
-}
-.flex-card:hover .flex-card__content {
-    box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1);
-}
-.flex-card__content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    border-width: 0;
-    border-style: solid;
-    border-color: #e9e9e9;
-    /*border-radius: 3px;*/
-    overflow: hidden;
-    transition: 0.3s;
-    background-color: var(--kit-color-content);
-    /*padding-bottom: calc(var(--gap-inner) / 2);*/
-    /*padding-top: calc(var(--gap-inner) / 2);*/
-}
-.flex-card__border {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    border-width: 1px;
-    border-style: solid;
-    border-color: transparent;
-    display: block;
-    pointer-events: none;
-}
-.flex-card__content:after,
-.flex-card__body:before,
-.flex-card__body:after {
-    content: '';
-    display: block;
-    flex-basis: calc(var(--gap-inner) / 2);
-    flex-grow: 0;
-    flex-shrink: 0;
-}
-.flex-card__content > *:not(.flex-card__border):empty {
-    display: none;
-}
-.flex-card__header {
-    width: 100%;
-}
-.flex-card__top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-}
-.flex-card__bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-}
-.flex-card__body {
-    display: flex;
-    flex-direction: column;
-    justify-content: stretch;
-    align-items: stretch;
-    height: 100%;
-    flex: 1 0 100%;
-}
-.flex-card__body > *, .flex-card__hover > * {
-    margin: calc(var(--gap-inner) / 2) var(--gap-inner);
-}
-.flex-card__body > *:empty, .flex-card__hover > *:empty {
-    display: none;
-}
-.flex-card__footer {
-    position: relative;
-}
-.flex-card__hover {
-    position: relative;
-    opacity: 0;
-    visibility: hidden;
-}
-.flex-card:hover .flex-card__content {
-    height: auto;
-    z-index: 100;
-}
-.flex-card:hover .flex-card__content > .flex-card__hover {
-    opacity: 1;
-    visibility: visible;
-    margin-top: calc(-1 * var(--gap-inner) / 2);
-}
-
-.flex-card__picture {
-    flex-basis: 50%;
-    flex-grow: 0;
-    flex-shrink: 1;
-    height: 0%;
-    --aspect-ratio: 1;
-}
-.flex-card__picture.aspect-ratio {
-    --aspect-ratio: 1;
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 1;
-    height: auto;
-}
-
-.flex-card__picture .kit-picture {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-origin: content-box;
-}
-.flex-card__name, .flex-card__title {
-    --line-clamp: 2;
-    --line-clamp-height: 1.1em;
-    flex-shrink: 0; /* todo test */
-}
-.flex-card__props {
-    position: relative;
-}
-.flex-card__text {
-    position: relative;
-}
-.flex-card__manager {
-    position: relative;
-}
-.flex-card__flex-delimiter {
-    flex: 1 10 0;
-    display: block !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    background: transparent;
-}
-.flex-card__ticket {
-    position: absolute;
-    top: var(--gap-inner);
-    left: var(--gap-inner);
-}
-/* flex-card-list--list */
-
-.flex-card-list--list {
-    --col-count: 1;
-}
-
-.flex-card-list--list .flex-card.aspect-ratio:before {
-    padding-bottom: unset;
-}
-.flex-card-list--list .flex-card.aspect-ratio:before {
-    padding-bottom: unset;
-}
-.flex-card-list--list .flex-card.aspect-ratio > .flex-card__section {
-    position: relative;
-}
-.flex-card-list--list .flex-card__body-shell.aspect-ratio:before {
-    padding-bottom: unset;
-}
-.flex-card-list--list .flex-card__body {
-    position: relative;
-    flex-direction: row;
-}
-.flex-card-list--list .flex-card__body > .flex-card__picture {
-    flex-basis: 12%;
-    flex-shrink: 0;
-    height: auto;
-    position: relative;
-}
-.flex-card-list--list .flex-card__body > .flex-card__picture {
-    flex-basis: 50px;
-    flex-shrink: 0;
-    height: auto;
-    position: relative;
-}
-.flex-card-list--list .flex-card__body > .flex-card__picture:before {
-    content: "";
-    display: block;
-    width: 100%;
-    padding-bottom: calc(100% / (var(--aspect-ratio)));
-}
-.flex-card-list--list .flex-card__body > .flex-card__picture > .kit-picture {
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    object-fit: contain;
-}
-
-/* ticket */
-
-.flex-list--ticket {
-    --col-count: 1;
-    --gap: 3px;
-    --line-clamp: 1;
-    --line-clamp-height: 1em;
-    font-size: 0.7em;
-    flex-direction: column;
-    align-items: flex-start;
-}
-.flex-list--ticket > .flex-list-item {
-    --col-width: auto;
-}
-.ticket-item {
-    padding: calc(2 * 0.1em) calc(6 * 0.1em);
-    background-color: hsl(0, 0%, 95%);
-}
-
-
 /* picture - icon */
 .kit-icon picture,
 .kit-icon img,

assets/flex-kit/flex-other.css

@@ -0,0 +1,29 @@
+
+
+/* flex-delimiter text */
+
+:root {
+    --flex-delimiter: ', ';
+    --flex-delimiter-index: 0;
+}
+
+.flex-delimiter > *:not(:first-child):not(:empty)::before {
+    content: var(--flex-delimiter);
+    --flex-delimiter-index:1;
+}
+
+.flex-delimiter > *:empty + *:not(:empty)::before
+{
+    content: '';
+    --flex-delimiter-index:0;
+}
+
+.flex-delimiter > *:not(:empty) ~ *:empty + *:not(:empty)::before
+{
+    content: var(--flex-delimiter);
+    --flex-delimiter-index:1;
+}
+
+.flex-delimiter > *:empty {
+    display:none;
+}

assets/flex-kit/flex-other.min.css

@@ -0,0 +1 @@
+:root{--flex-delimiter:", ";--flex-delimiter-index:0}.flex-delimiter>:not(:first-child):not(:empty):before{content:var(--flex-delimiter);--flex-delimiter-index:1}.flex-delimiter>:empty+:not(:empty):before{content:"";--flex-delimiter-index:0}.flex-delimiter>:not(:empty)~:empty+:not(:empty):before{content:var(--flex-delimiter);--flex-delimiter-index:1}.flex-delimiter>:empty{display:none}

assets/flex-kit/item/flex-item.css

@@ -0,0 +1,234 @@
+
+/* flex-card */
+
+.flex-card {
+    --aspect-ratio: calc(200 / 300);
+    --gap-inner: 10px;
+    position: relative;
+}
+.flex-card:hover .flex-card__content {
+    box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.1);
+}
+.flex-card__section {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+.flex-card::before {
+    content: "";
+    display: block;
+    width: 100%;
+    padding-bottom: calc((100% - var(--gap, 0) * (var(--col-span, 1) - 1)) / (var(--aspect-ratio)) / var(--col-span, 1));
+    pointer-events: none;
+}
+.flex-card__content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e9e9e9;
+    /*border-radius: 3px;*/
+    overflow: hidden;
+    transition: 0.3s;
+    background-color: var(--kit-color-content);
+    /*padding-bottom: calc(var(--gap-inner) / 2);*/
+    /*padding-top: calc(var(--gap-inner) / 2);*/
+}
+.aspect-ratio.flex-card__body-shell:before {
+    /*padding-bottom: calc((100% / var(--col-span, 1) - var(--gap, 0)) / (var(--aspect-ratio)));*/
+    padding-bottom: calc((100% - var(--gap, 0) * (var(--col-span, 1) - 1)) / (var(--aspect-ratio)) / var(--col-span, 1));
+}
+.flex-card__border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    display: block;
+    pointer-events: none;
+}
+.flex-card__content:after,
+.flex-card__body:before,
+.flex-card__body:after {
+    content: '';
+    display: block;
+    flex-basis: calc(var(--gap-inner) / 2);
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+.flex-card__content > *:not(.flex-card__border):empty {
+    display: none;
+}
+.flex-card__header {
+    width: 100%;
+}
+.flex-card__top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}
+.flex-card__bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+.flex-card__body {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+    height: 100%;
+    flex: 1 0 100%;
+}
+.flex-card__body > *, .flex-card__hover {
+    margin: calc(var(--gap-inner) / 2) var(--gap-inner);
+}
+.flex-card__body > *:empty, .flex-card__hover > *:empty {
+    display: none;
+}
+.flex-card__footer {
+    position: relative;
+}
+.flex-card__hover {
+    position: relative;
+    opacity: 0;
+    visibility: hidden;
+}
+.flex-card:hover .flex-card__content {
+    height: auto;
+    z-index: 100;
+}
+.flex-card:hover .flex-card__content > .flex-card__hover {
+    opacity: 1;
+    visibility: visible;
+    margin-top: calc(-1 * var(--gap-inner) / 2);
+}
+
+.flex-card__picture {
+    flex-basis: 50%;
+    flex-grow: 0;
+    flex-shrink: 1;
+    height: 0%;
+    --aspect-ratio: 1;
+}
+.flex-card__picture.aspect-ratio {
+    --aspect-ratio: 1;
+    flex-basis: auto;
+    flex-grow: 0;
+    flex-shrink: 1;
+    height: auto;
+}
+
+.flex-card__picture .kit-picture {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-origin: content-box;
+}
+.flex-card__name, .flex-card__title {
+    --line-clamp: 2;
+    --line-clamp-height: 1.1em;
+    flex-shrink: 0; /* todo test */
+}
+.flex-card__props {
+    position: relative;
+}
+.flex-card__text {
+    position: relative;
+}
+.flex-card__manager {
+    position: relative;
+}
+.flex-card__flex-delimiter {
+    flex: 1 10 0;
+    display: block !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: transparent;
+}
+.flex-card__ticket {
+    position: absolute;
+    top: var(--gap-inner);
+    left: var(--gap-inner);
+}
+/* flex-card-list--list */
+
+.flex-card-list--list {
+    --col-count: 1;
+}
+
+.flex-card-list--list .flex-card.aspect-ratio:before {
+    padding-bottom: unset;
+}
+.flex-card-list--list .flex-card.aspect-ratio:before {
+    padding-bottom: unset;
+}
+.flex-card-list--list .flex-card.aspect-ratio > .flex-card__section {
+    position: relative;
+}
+.flex-card-list--list .flex-card__body-shell.aspect-ratio:before {
+    padding-bottom: unset;
+}
+.flex-card-list--list .flex-card__body {
+    position: relative;
+    flex-direction: row;
+}
+.flex-card-list--list .flex-card__body > .flex-card__picture {
+    flex-basis: 12%;
+    flex-shrink: 0;
+    height: auto;
+    position: relative;
+}
+.flex-card-list--list .flex-card__body > .flex-card__picture {
+    flex-basis: 50px;
+    flex-shrink: 0;
+    height: auto;
+    position: relative;
+}
+.flex-card-list--list .flex-card__body > .flex-card__picture:before {
+    content: "";
+    display: block;
+    width: 100%;
+    padding-bottom: calc(100% / (var(--aspect-ratio)));
+}
+.flex-card-list--list .flex-card__body > .flex-card__picture > .kit-picture {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* ticket */
+
+.flex-list--ticket {
+    --col-count: 1;
+    --gap: 3px;
+    --line-clamp: 1;
+    --line-clamp-height: 1em;
+    font-size: 0.7em;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.flex-list--ticket > .flex-list-item {
+    --col-width: auto;
+}
+.ticket-item {
+    padding: calc(2 * 0.1em) calc(6 * 0.1em);
+    background-color: hsl(0, 0%, 95%);
+}

assets/flex-kit/item/flex-item.min.css

@@ -0,0 +1 @@
+.flex-card{--aspect-ratio:calc(200 / 300);--gap-inner:10px;position:relative}.flex-card:hover .flex-card__content{box-shadow:0 0 27px rgba(0,0,0,.1)}.flex-card__section{width:100%;height:100%;position:absolute;top:0;left:0}.flex-card:before{content:"";width:100%;padding-bottom:calc((100% - var(--gap,0) * (var(--col-span,1) - 1)) / (var(--aspect-ratio)) / var(--col-span,1));pointer-events:none;display:block}.flex-card__content{background-color:var(--kit-color-content);border:0 solid #e9e9e9;flex-direction:column;justify-content:stretch;width:100%;height:100%;transition:all .3s;display:flex;position:relative;overflow:hidden}.aspect-ratio.flex-card__body-shell:before{padding-bottom:calc((100% - var(--gap,0) * (var(--col-span,1) - 1)) / (var(--aspect-ratio)) / var(--col-span,1))}.flex-card__border{pointer-events:none;border:1px solid transparent;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.flex-card__content:after,.flex-card__body:before,.flex-card__body:after{content:"";flex-basis:calc(var(--gap-inner) / 2);flex-grow:0;flex-shrink:0;display:block}.flex-card__content>:not(.flex-card__border):empty{display:none}.flex-card__header{width:100%}.flex-card__top{width:100%;position:absolute;top:0;left:0}.flex-card__bottom{width:100%;position:absolute;bottom:0;left:0}.flex-card__body{flex-direction:column;flex:1 0 100%;justify-content:stretch;align-items:stretch;height:100%;display:flex}.flex-card__body>*,.flex-card__hover{margin:calc(var(--gap-inner) / 2) var(--gap-inner)}.flex-card__body>:empty,.flex-card__hover>:empty{display:none}.flex-card__footer{position:relative}.flex-card__hover{opacity:0;visibility:hidden;position:relative}.flex-card:hover .flex-card__content{z-index:100;height:auto}.flex-card:hover .flex-card__content>.flex-card__hover{opacity:1;visibility:visible;margin-top:calc(-1 * var(--gap-inner) / 2)}.flex-card__picture{--aspect-ratio:1;flex:0 50%;height:0%}.flex-card__picture.aspect-ratio{--aspect-ratio:1;flex:0 auto;height:auto}.flex-card__picture .kit-picture{background-position:50%;background-repeat:no-repeat;background-size:contain;background-origin:content-box;width:100%;height:100%;position:relative}.flex-card__name,.flex-card__title{--line-clamp:2;--line-clamp-height:1.1em;flex-shrink:0}.flex-card__props,.flex-card__text,.flex-card__manager{position:relative}.flex-card__flex-delimiter{background:0 0;flex:1 10 0;margin:0!important;padding:0!important;display:block!important}.flex-card__ticket{top:var(--gap-inner);left:var(--gap-inner);position:absolute}.flex-card-list--list{--col-count:1}.flex-card-list--list .flex-card.aspect-ratio:before{padding-bottom:unset;padding-bottom:unset}.flex-card-list--list .flex-card.aspect-ratio>.flex-card__section{position:relative}.flex-card-list--list .flex-card__body-shell.aspect-ratio:before{padding-bottom:unset}.flex-card-list--list .flex-card__body{flex-direction:row;position:relative}.flex-card-list--list .flex-card__body>.flex-card__picture{flex-shrink:0;flex-basis:50px;height:auto;position:relative}.flex-card-list--list .flex-card__body>.flex-card__picture:before{content:"";width:100%;padding-bottom:calc(100% / (var(--aspect-ratio)));display:block}.flex-card-list--list .flex-card__body>.flex-card__picture>.kit-picture{object-fit:contain;width:100%;height:100%;position:absolute;top:0;left:0}.flex-list--ticket{--col-count:1;--gap:3px;--line-clamp:1;--line-clamp-height:1em;flex-direction:column;align-items:flex-start;font-size:.7em}.flex-list--ticket>.flex-list-item{--col-width:auto}.ticket-item{background-color:#f2f2f2;padding:.2em .6em}

templates/card/block.php

@@ -5,7 +5,7 @@
 
 ?>
 
-<div class="flex-card aspect-ratio">
+<div class="flex-card">
     <div class="flex-card__section">
         <div class="flex-card__content">
             <div class="flex-card__body-shell aspect-ratio">

tests/card/block.php

@@ -1,5 +1,6 @@
-<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
+<?php require($_SERVER['DOCUMENT_ROOT']. '/bitrix/modules/main/include/prolog_before.php');?>
 <?php
+use Bitrix\Main\Page\Asset;
 /**
  * @var $APPLICATION
  */
@@ -7,6 +8,7 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
     app()->service()->assets()->setPlugins([
         'kit:config',
         'kit:flex-kit',
+        'kit:flex-kit/item',
         'kit:core',
         'kit:bsCore',
         'kit:collapse',
@@ -15,6 +17,7 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
         'kit:theme',
     ])->render();
 }
+Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
 $APPLICATION->ShowHead();
 
 ?>
@@ -24,6 +27,7 @@ $APPLICATION->ShowHead();
     }
     .card-flex-list--block {
         --col-count: 5;
+        --gap: 0px;
     }
     @media (max-width: 1200px) {
         .card-flex-list--block {
@@ -34,6 +38,9 @@ $APPLICATION->ShowHead();
         .card-flex-list--block {
             --col-count: 4;
         }
+        .card-flex-list--block .flex-list-item {
+            --col-span: 1 !important;
+        }
     }
     @media (max-width: 800px) {
         .card-flex-list--block {
@@ -45,26 +52,34 @@ $APPLICATION->ShowHead();
             --col-count: 2;
         }
     }
+    @media (max-width: 320px) {
+        .card-flex-list--block {
+            --col-count: 1;
+        }
+    }
     .section-product-list .flex-card {
         --kit-color-content: #FFF;
         --aspect-ratio: calc(200 / 250);
+        --aspect-ratio: 1;
     }
     .section-product-list .flex-card__picture {
         flex-grow: 1;
     }
+    .flex-card__picture img {
+        object-fit: cover;
+    }
     .flex-card__hover {
-        text-align: center;
         color: grey;
         font-size: 0.8em;
     }
 </style>
 <?php
 
-$items = array_fill(0, 40, [
+$items = array_fill(0, 20, [
     'id' => 1,
     'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
     'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit  Ab accusamus aliquid, consequuntur corporis ducimus',
-    'picture' => '<img src="https://imgholder.ru/200x200/">',
+    'picture' => '<img src="https://placehold.co/200">',
     'text_preview' => 'asdas asdas dasdasd',
     'tickets' => [
         [
@@ -86,15 +101,39 @@ $items = array_fill(0, 40, [
         <div>
             <h1>Каталог</h1>
         </div>
-        <div class="flex-list card-flex-list card-flex-list--block">
+
+        <div class="flex-list card-flex-list card-flex-list--block" style>
             <?php
-            foreach($items as $item) {?>
+            foreach($items as $i =>$item) {
-                <div class="flex-list-item">
+                $colSpan = match ($i){
+                    0, 3 => 2,
+                    1, 7 => 3,
+                    14 => 5,
+                    default => 1,
+                }?>
+                <div class="flex-list-item" style="--col-span: <?=$colSpan?>;">
                     <?php
                     echo app()->service()->templater()->get('kit:card/block', $item);
                     ?>
                 </div>
             <?php }?>
         </div>
+
+        <div class="flex-list card-flex-list card-flex-list--block flex-aspect-ratio" style="--gap: 50px;">
+            <?php
+            foreach($items as $i =>$item) {
+                $colSpan = match ($i){
+                    0, 3 => 2,
+                    1, 7 => 3,
+                    14 => 5,
+                    default => 1,
+                }?>
+                <div class="flex-list-item" style="--col-span: <?=$colSpan?>;">
+                    <?php
+                    echo '<div><div style="background-color: #0a7ddd;border: 1px solid;width: 100%;height: 100%;"></div></div>';
+                    ?>
+                </div>
+            <?php }?>
+        </div>
     </section>
 </div>