fix

tests/card/block.php

@@ -1,5 +1,8 @@
 <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
-<?
+<?php
+/**
+ * @var $APPLICATION
+ */
 if(\Bitrix\Main\Loader::includeModule('wt.core')) {
     app()->service()->assets()->setPlugins([
         'kit:config',
@@ -16,9 +19,31 @@ $APPLICATION->ShowHead();
 
 ?>
 <style  type="text/css">
-    .section-product-list {
+    :root {
+        --width-wrapper: 1600px;
+    }
+    .card-flex-list--block {
         --col-count: 5;
-
+    }
+    @media (max-width: 1200px) {
+        .card-flex-list--block {
+            --col-count: 5;
+        }
+    }
+    @media (max-width: 1000px) {
+        .card-flex-list--block {
+            --col-count: 4;
+        }
+    }
+    @media (max-width: 800px) {
+        .card-flex-list--block {
+            --col-count: 3;
+        }
+    }
+    @media (max-width: 500px) {
+        .card-flex-list--block {
+            --col-count: 2;
+        }
     }
     .section-product-list .flex-card {
         --kit-color-content: #FFF;
@@ -33,13 +58,13 @@ $APPLICATION->ShowHead();
         font-size: 0.8em;
     }
 </style>
-<?
+<?php
 
 $items = array_fill(0, 40, [
     '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://picsum.photos/200/200">',
+    'picture' => '<img src="https://imgholder.ru/200x200/">',
     'text_preview' => 'asdas asdas dasdasd',
     'tickets' => [
         [
@@ -61,14 +86,15 @@ $items = array_fill(0, 40, [
         <div>
             <h1>Каталог</h1>
         </div>
-        <div class="flex-list flex-card-list--list-">
-            <?foreach($items as $item) {?>
+        <div class="flex-list card-flex-list card-flex-list--block">
+            <?php
+            foreach($items as $item) {?>
                 <div class="flex-list-item">
-                    <?
+                    <?php
                     echo app()->service()->templater()->get('kit:card/block', $item);
                     ?>
                 </div>
-            <?}?>
+            <?php }?>
         </div>
     </section>
 </div>