diff --git a/assets/css/frontend/header-components.css b/assets/css/frontend/header-components.css
index a779178c..c77493d3 100644
--- a/assets/css/frontend/header-components.css
+++ b/assets/css/frontend/header-components.css
@@ -56,6 +56,11 @@
   padding-right: 15px;
   box-sizing: border-box;
 }
+.header-slider-card .aksrt-icon-cover-card-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--aksrt-icon-card-cols, 1), minmax(0, 1fr));
+  gap: 15px;
+}
 .filter-blur .header-slider-card .zib-widget,
 .filter-blur .header-components-card .zib-widget {
   -webkit-backdrop-filter: saturate(5) blur(20px);
diff --git a/assets/css/frontend/header-components/search-keywords-row.css b/assets/css/frontend/header-components/search-keywords-row.css
index 86ee186c..e5304073 100644
--- a/assets/css/frontend/header-components/search-keywords-row.css
+++ b/assets/css/frontend/header-components/search-keywords-row.css
@@ -58,6 +58,12 @@
 
 /* zibll mobile (max-width: 767px) search / card offsets */
 @media (max-width: 767px) {
+
+    .header-slider-card .aksrt-icon-cover-card-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+    }
+
     .header-slider-container .new-swiper.slide-header .swiper-wrapper,
     .new-swiper.slide-index.slide-header .swiper-wrapper {
         height: var(--m-height);
diff --git a/inc/helpers/homepage/header-components.php b/inc/helpers/homepage/header-components.php
index 12875c7f..a2a4efb7 100644
--- a/inc/helpers/homepage/header-components.php
+++ b/inc/helpers/homepage/header-components.php
@@ -428,14 +428,17 @@ if (!function_exists('aksrt_header_slide')) {
 				if ($inner === '') {
 					continue;
 				}
-				$items .= !empty($card_options['show_widget_bg']) ? '<div class="relative-h">' : '<div class="flex1">';
-				$items .= $inner . '</div>';
+				$items .= !empty($card_options['show_widget_bg']) ? '<div class="relative-h">' . $inner . '</div>' : $inner;
 				$card_count++;
 			}
 			if ($items !== '') {
-				$cards_html = '<div class="header-slider-card container">'
-					. (!empty($card_options['show_widget_bg']) ? '<div class="zib-widget padding-10">' : '<div class="">')
-					. '<div class="flex jse flex-row gutters-5 flex-col-sm-2">' . $items . '</div></div></div>';
+				$cards_html = '<div class="header-slider-card container">';
+				if (!empty($card_options['show_widget_bg'])) {
+					$cards_html .= '<div class="zib-widget padding-10"><div class="flex jse flex-row gutters-5 flex-col-sm-2">' . $items . '</div></div>';
+				} else {
+					$cards_html .= '<div class="aksrt-icon-cover-card-grid" style="--aksrt-icon-card-cols:' . (int) $card_count . '">' . $items . '</div>';
+				}
+				$cards_html .= '</div>';
 			}
 		}
 
diff --git a/tests/widget-system/icon-card-contract.test.cjs b/tests/widget-system/icon-card-contract.test.cjs
index 108850ab..6ab9bfea 100644
--- a/tests/widget-system/icon-card-contract.test.cjs
+++ b/tests/widget-system/icon-card-contract.test.cjs
@@ -26,6 +26,9 @@ test('icon card renderers keep vertical and horizontal Zibll DOM contracts separ
 
 test('homepage horizontal cards only use Zibll surface and responsive padding rules', () => {
   const css = read('assets/css/frontend/header-components/dark-theme.css');
+  const headerCss = read('assets/css/frontend/header-components.css');
+  const mobileCss = read('assets/css/frontend/header-components/search-keywords-row.css');
+  const header = read('inc/helpers/homepage/header-components.php');
   const widgetCss = read('assets/widgets/frontend.css');
 
   assert.match(css, /\.header-slider-card \.icon-cover-card\.zib-widget \{\s*padding: 10px;/);
@@ -33,4 +36,7 @@ test('homepage horizontal cards only use Zibll surface and responsive padding ru
   assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon\.badg\.cir/);
   assert.doesNotMatch(css, /\.header-slider-card \.icon-cover-icon img/);
   assert.doesNotMatch(widgetCss, /aksrt-widget-icon-cards \.icon-cover-card/);
+  assert.match(header, /aksrt-icon-cover-card-grid/);
+  assert.match(headerCss, /\.header-slider-card \.aksrt-icon-cover-card-grid \{[\s\S]*?grid-template-columns: repeat\(var\(--aksrt-icon-card-cols, 1\), minmax\(0, 1fr\)\);[\s\S]*?gap: 15px;/);
+  assert.match(mobileCss, /\.header-slider-card \.aksrt-icon-cover-card-grid \{[\s\S]*?grid-template-columns: repeat\(2, minmax\(0, 1fr\)\);[\s\S]*?gap: 10px;/);
 });