From f7d69140f954eb8feb92a3c0fd9d80b6e9f0939b Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Mon, 3 Aug 2026 02:38:42 +0300
Subject: [PATCH 1/7] fix: hero-section-slider

---
 src/assets/script/art-slider.js | 20 ++++++++++++++------
 src/assets/style/style.scss     | 17 +++++++++++++++++
 src/index.ejs                   | 12 ++++++------
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js
index b1e7d79..c0d847b 100644
--- a/src/assets/script/art-slider.js
+++ b/src/assets/script/art-slider.js
@@ -2,7 +2,7 @@ import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs
 
 const swiperCss = 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css';
 if (!document.querySelector(`link[href*="swiper-bundle.min.css"]`)) {
-	const link = document.createElement('link');
+	const link = document.createElement("link");
 	link.rel = 'stylesheet';
 	link.href = swiperCss;
 	document.head.appendChild(link);
@@ -19,19 +19,27 @@ class ArtsSlider extends HTMLElement {
 
 		this.swiper = new Swiper(swiperContainer, {
 			navigation: {
-				nextEl: '.next',
-				prevEl: '.prev'
+				nextEl: ".next",
+				prevEl: ".prev",
 			},
 			loop: true,
 			speed: 300,
-			effect: 'fade',
+			effect: "fade",
 			fadeEffect: { crossFade: true },
 			simulateTouch: false,
 			allowTouchMove: true,
 			autoplay: true,
-			grabCursor: false
+			grabCursor: false,
 		});
+
+		const wrapper = swiperContainer.querySelector('.swiper-wrapper');
+		wrapper?.classList.remove("carousel-track");
+		const slides = swiperContainer.querySelectorAll('.swiper-slide');
+		slides.forEach((slide) => slide.classList.remove("carousel-slide"));
+
+		this.querySelector('.prev')?.classList.remove('O0', 'Vs-h');
+		this.querySelector('.next')?.classList.remove('O0', 'Vs-h');
 	}
 }
 
-customElements.define('arts-slider', ArtsSlider);
\ No newline at end of file
+customElements.define("arts-slider", ArtsSlider);
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index f1a538e..8b32b84 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -291,3 +291,20 @@ art-panel[size],
     grid-row: var(--masonry-row-xl);
   }
 }
+
+.carousel-track {
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.carousel-track::-webkit-scrollbar {
+  display: none;
+}
+.carousel-slide {
+  flex: 0 0 100%;
+  scroll-snap-align: start;
+}
\ No newline at end of file
diff --git a/src/index.ejs b/src/index.ejs
index 1483f48..276fa27 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -59,7 +59,7 @@ area: 'main'
 
 	<div class="Ps D-f Fld-c Ai-c Jc-c Gap2u Bgc-tp W100p md_W604 md_Gap4u md_M14u;0;6u lg_W100p lg_M0 lg_Gc2 lg_Gr1/4 Zi2">
 		<arts-slider class="D-f Ai-fs Jc-c Fl1 W100p Gap6.5u md_Gap30u lg_Gap15u xl_Gap20u xxl_Gap25u">
-				<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs">
+				<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs O0 Vs-h">
 					<svg class="Tf -Rt180d C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
 						<use href="/assets/img/icons.svg#arrow-slider"></use>
 					</svg>
@@ -72,20 +72,20 @@ area: 'main'
 						<use href="/assets/img/decor.svg#squareDot"></use>
 					</svg>
 					<div class="W100p P0 md_P2u md_Bgc-$core400 md_Bxsd0;0;0;0.5u;$core900">
-						<div class="swiper W100p Bgc-tp Apcr1">
-							<div class="swiper-wrapper">
+						<div class="swiper W100p Bgc-tp Apcr1 Ov-h">
+							<div class="swiper-wrapper carousel-track">
 								<% if (filteredArts.length) { %>
 									<% for (let art of filteredArts) { %>
-										<div class="swiper-slide"><%- include(`./arts/${art.artId}.ejs`) %></div>
+										<div class="swiper-slide carousel-slide"><%- include(`./arts/${art.artId}.ejs`) %></div>
 									<% } %>
 									<% } else { %>
-										<div class="swiper-slide">there are no arts</div>
+										<div class="swiper-slide carousel-slide">there are no arts</div>
 								<% } %>
 							</div>
 						</div>
 					</div>
 				</div>
-				<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs">
+				<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs O0 Vs-h">
 					<svg class="C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
 						<use href="/assets/img/icons.svg#arrow-slider"></use>
 					</svg>

From 9ff58f669c9cf3d47cf90366988b32383aabd90a Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Mon, 3 Aug 2026 02:46:47 +0300
Subject: [PATCH 2/7] fix: art-slider (quotation marks)

---
 src/assets/script/art-slider.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js
index c0d847b..3276791 100644
--- a/src/assets/script/art-slider.js
+++ b/src/assets/script/art-slider.js
@@ -19,12 +19,12 @@ class ArtsSlider extends HTMLElement {
 
 		this.swiper = new Swiper(swiperContainer, {
 			navigation: {
-				nextEl: ".next",
-				prevEl: ".prev",
+				nextEl: '.next',
+				prevEl: '.prev',
 			},
 			loop: true,
 			speed: 300,
-			effect: "fade",
+			effect: 'fade',
 			fadeEffect: { crossFade: true },
 			simulateTouch: false,
 			allowTouchMove: true,
@@ -42,4 +42,4 @@ class ArtsSlider extends HTMLElement {
 	}
 }
 
-customElements.define("arts-slider", ArtsSlider);
+customElements.define('arts-slider', ArtsSlider);

From c2f4a2cd9c184841f9f1f10c0965b7283ae68133 Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Mon, 3 Aug 2026 03:22:43 +0300
Subject: [PATCH 3/7] fix: art-slider and bacground code block

---
 src/_includes/components/code-block.ejs |  2 +-
 src/assets/script/art-slider.js         | 10 +++++-----
 src/assets/style/style.scss             |  2 ++
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/_includes/components/code-block.ejs b/src/_includes/components/code-block.ejs
index 741943c..cfcf06d 100644
--- a/src/_includes/components/code-block.ejs
+++ b/src/_includes/components/code-block.ejs
@@ -1,6 +1,6 @@
 <% if(it.src) {%>
 	<div class="-Sz100p Bdrd2u P0">
-		<pre class=" M0 Fns2.2u xxl_Fns2.4u Lnh1.8 code H100p Whs-pw"><code class="language-<%= it.lang%>"><%- include(it.src)%></code></pre>
+		<pre class=" M0 Fns2.2u xxl_Fns2.4u Lnh1.8 code H100p Whs-pw"><code class="language-<%= it.lang%>" style="background-color: var(--ml-codeBgc)"><%- include(it.src)%></code></pre>
 	</div>
 <% } else {%>
 	<p class="C-red"> Invalid source</p>
diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js
index 3276791..a37e732 100644
--- a/src/assets/script/art-slider.js
+++ b/src/assets/script/art-slider.js
@@ -17,6 +17,11 @@ class ArtsSlider extends HTMLElement {
 		const swiperContainer = this.querySelector('.swiper');
 		if (!swiperContainer) return;
 
+		const wrapper = swiperContainer.querySelector('.swiper-wrapper');
+		wrapper?.classList.remove("carousel-track");
+		const slides = swiperContainer.querySelectorAll('.swiper-slide');
+		slides.forEach((slide) => slide.classList.remove("carousel-slide"));
+
 		this.swiper = new Swiper(swiperContainer, {
 			navigation: {
 				nextEl: '.next',
@@ -32,11 +37,6 @@ class ArtsSlider extends HTMLElement {
 			grabCursor: false,
 		});
 
-		const wrapper = swiperContainer.querySelector('.swiper-wrapper');
-		wrapper?.classList.remove("carousel-track");
-		const slides = swiperContainer.querySelectorAll('.swiper-slide');
-		slides.forEach((slide) => slide.classList.remove("carousel-slide"));
-
 		this.querySelector('.prev')?.classList.remove('O0', 'Vs-h');
 		this.querySelector('.next')?.classList.remove('O0', 'Vs-h');
 	}
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index 8b32b84..5d11e8d 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -100,6 +100,7 @@ a {
 	--ml-correct850: rgba(183, 250, 207, 0.6);
 	--ml-correct750: rgba(83, 250, 141, 0.6);
 	--ml-overlay: rgba(255, 255, 255, 0.7);
+	--ml-codeBgc: #4f3863;
 
 	// arts
 	--ml-artGhost: #ffbcB0;
@@ -187,6 +188,7 @@ a {
 	--ml-correct850: rgba(1,102,48,0.4);
 	--ml-correct750: rgba(0,130,54,0.6);
 	--ml-overlay: rgba(0, 0, 0, 0.7);
+	--ml-codeBgc: #0d1117;
 
 	// arts
 	--ml-artGhost: #450c00;

From daf172bd1f66f65b6a9bef3ca3f02582f66f50a2 Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Mon, 3 Aug 2026 03:47:30 +0300
Subject: [PATCH 4/7] fix: slider and code block and card Handwritten CSS

---
 src/index.ejs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.ejs b/src/index.ejs
index 276fa27..34df5a6 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -332,7 +332,7 @@ area: 'main'
 	<%# Compactness comparison%>
 
 	<h3 class="D-n xl_D M11u;0;0 Fns4u Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 Txa-c Ps Zi1">See how much more code you need in handwritten CSS to reproduce the same styles written in mlut</h3>
-	<h3 class="D xl_D-n M8u;0;0 Fns4u Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 Txa-c">Almost all power of CSS in one utility class</h3>
+	<h3 class="D xl_D-n M8u;0;0 Fns4u Fnw600 Fnst-n Lnh100p Lts0 C-$accent900 Txa-c Ps Zi1">Almost all power of CSS in one utility class</h3>
 	<div class="D-f Fld-c Ai-c Gap16 M4.5u;0;0 P4u;3u W100p Bdrd8 Bgc-$core810 -Gdl90d,$brand50;0p,$brand100;100p md_Fld-r md_Ai-st md_Jc-c md_Gap20 md_P4u;0 md_Bgc-tp md_Bgi-n xl_M26;0;0 xl_Gap32 xl_P0 Ps Zi1">
 
 		<%# Handwritten CSS card%>
@@ -369,7 +369,7 @@ area: 'main'
 			<use href="/assets/img/decor.svg#squareDot"></use>
 		</svg>
 	</div>
-	<div class="D-n md_D Ps-a W66p Apcr2/3 B0 L50p Tf -Tr-50p;0 <%= comparisonCss.gradientEclipse %> <%= comparisonCss.gradientRectangle %>"></div>
+	<div class="D-n md_D Ps-a W98p Apcr2/3 B0 L50p Tf -Tr-50p;0 <%= comparisonCss.gradientEclipse %> <%= comparisonCss.gradientRectangle %>"></div>
 	<div class="D-n xl_D Ps-a T-4p R9p W384 Apcr1">
 		<div class="Ps-a T50p L50p Tf -Tr-50p;-70p W52p Apcr1 Bd4;s;#16348C Bdrd100p <%= decorCss.twoCircleTop %>"></div>
 		<div class="Ps-a T55p L50p W69 Apcr1 Bdrd100p Bd8;s;#394EB6 <%= decorCss.circle %> T15p_af L-47p_af Bgc-$brand_af"></div>

From 7314b2936a9c771cdb96b23297ea63fe0f86cbb0 Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Tue, 4 Aug 2026 21:42:58 +0300
Subject: [PATCH 5/7] fix comments after review

---
 src/_includes/components/code-block.ejs |  2 +-
 src/assets/script/art-slider.js         | 13 ++--
 src/assets/script/theme-switcher.js     | 22 ++++++-
 src/assets/style/style.scss             | 83 ++++++++++++++-----------
 src/layouts/base.ejs                    |  3 +-
 5 files changed, 77 insertions(+), 46 deletions(-)

diff --git a/src/_includes/components/code-block.ejs b/src/_includes/components/code-block.ejs
index cfcf06d..741943c 100644
--- a/src/_includes/components/code-block.ejs
+++ b/src/_includes/components/code-block.ejs
@@ -1,6 +1,6 @@
 <% if(it.src) {%>
 	<div class="-Sz100p Bdrd2u P0">
-		<pre class=" M0 Fns2.2u xxl_Fns2.4u Lnh1.8 code H100p Whs-pw"><code class="language-<%= it.lang%>" style="background-color: var(--ml-codeBgc)"><%- include(it.src)%></code></pre>
+		<pre class=" M0 Fns2.2u xxl_Fns2.4u Lnh1.8 code H100p Whs-pw"><code class="language-<%= it.lang%>"><%- include(it.src)%></code></pre>
 	</div>
 <% } else {%>
 	<p class="C-red"> Invalid source</p>
diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js
index a37e732..11a8230 100644
--- a/src/assets/script/art-slider.js
+++ b/src/assets/script/art-slider.js
@@ -17,11 +17,6 @@ class ArtsSlider extends HTMLElement {
 		const swiperContainer = this.querySelector('.swiper');
 		if (!swiperContainer) return;
 
-		const wrapper = swiperContainer.querySelector('.swiper-wrapper');
-		wrapper?.classList.remove("carousel-track");
-		const slides = swiperContainer.querySelectorAll('.swiper-slide');
-		slides.forEach((slide) => slide.classList.remove("carousel-slide"));
-
 		this.swiper = new Swiper(swiperContainer, {
 			navigation: {
 				nextEl: '.next',
@@ -29,17 +24,19 @@ class ArtsSlider extends HTMLElement {
 			},
 			loop: true,
 			speed: 300,
-			effect: 'fade',
-			fadeEffect: { crossFade: true },
+			effect: 'slide',
 			simulateTouch: false,
 			allowTouchMove: true,
 			autoplay: true,
-			grabCursor: false,
+			grabCursor: false
 		});
 
+		this.querySelector('.swiper-wrapper').classList.remove('carousel-track');
+		this.querySelectorAll('.swiper-slide').forEach(s => s.classList.remove('carousel-slide'));
 		this.querySelector('.prev')?.classList.remove('O0', 'Vs-h');
 		this.querySelector('.next')?.classList.remove('O0', 'Vs-h');
 	}
+
 }
 
 customElements.define('arts-slider', ArtsSlider);
diff --git a/src/assets/script/theme-switcher.js b/src/assets/script/theme-switcher.js
index 2671c5c..1076a98 100644
--- a/src/assets/script/theme-switcher.js
+++ b/src/assets/script/theme-switcher.js
@@ -11,8 +11,9 @@ class ThemeSwitcher extends HTMLElement {
 		if (this._buttons.length === 0) return;
 
 		this._updateActiveButton(this._theme);
+		this._updateHighlightTheme(this._theme);
 
-		this.addEventListener('click', (e) => {
+		this.addEventListener("click", (e) => {
 			const button = e.target.closest('[data-theme]');
 			if (!button || !button.dataset.theme) return;
 			this.setTheme(button.dataset.theme);
@@ -33,6 +34,7 @@ class ThemeSwitcher extends HTMLElement {
 		localStorage.setItem('mlut-theme', theme);
 		this.applyTheme(theme);
 		this._updateActiveButton(theme);
+		this._updateHighlightTheme(theme);
 	}
 
 	_updateActiveButton(theme) {
@@ -42,6 +44,24 @@ class ThemeSwitcher extends HTMLElement {
 			btn.disabled = isActive;
 		});
 	}
+
+	_updateHighlightTheme(theme) {
+		const effectiveTheme = (theme === 'auto')
+			? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+			: theme;
+
+		const lightLink = document.getElementById('hljs-light');
+		const darkLink = document.getElementById('hljs-dark');
+		if (!lightLink || !darkLink) return;
+
+		if (effectiveTheme === 'dark') {
+			lightLink.setAttribute('media', 'not all');
+			darkLink.setAttribute('media', 'all');
+		} else {
+			lightLink.setAttribute('media', 'all');
+			darkLink.setAttribute('media', 'not all');
+		}
+	}
 }
 
 customElements.define('theme-switcher', ThemeSwitcher);
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index 5d11e8d..b19d09d 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -100,7 +100,6 @@ a {
 	--ml-correct850: rgba(183, 250, 207, 0.6);
 	--ml-correct750: rgba(83, 250, 141, 0.6);
 	--ml-overlay: rgba(255, 255, 255, 0.7);
-	--ml-codeBgc: #4f3863;
 
 	// arts
 	--ml-artGhost: #ffbcB0;
@@ -188,7 +187,6 @@ a {
 	--ml-correct850: rgba(1,102,48,0.4);
 	--ml-correct750: rgba(0,130,54,0.6);
 	--ml-overlay: rgba(0, 0, 0, 0.7);
-	--ml-codeBgc: #0d1117;
 
 	// arts
 	--ml-artGhost: #450c00;
@@ -254,59 +252,74 @@ html, .theme-dark {
 
 art-panel[size],
 .arts-masonry-cta {
-  min-width: 0;
+	min-width: 0;
 }
 
 @media (min-width: 768px) {
-  art-panel[size],
-  .arts-masonry-cta {
-    grid-column: var(--masonry-column-md);
-    grid-row: var(--masonry-row-md);
-  }
+	art-panel[size],
+	.arts-masonry-cta {
+		grid-column: var(--masonry-column-md);
+		grid-row: var(--masonry-row-md);
+	}
 }
 
 @media (min-width: 1200px) {
-  art-panel[size],
-  .arts-masonry-cta {
-    grid-column: var(--masonry-column-xl);
-    grid-row: var(--masonry-row-xl);
-  }
+	art-panel[size],
+	.arts-masonry-cta {
+		grid-column: var(--masonry-column-xl);
+		grid-row: var(--masonry-row-xl);
+	}
 }
 
 art-panel[size],
 .arts-masonry-cta {
-  min-width: 0;
+	min-width: 0;
 }
 
 @media (min-width: 768px) {
-  art-panel[size],
-  .arts-masonry-cta {
-    grid-column: var(--masonry-column-md);
-    grid-row: var(--masonry-row-md);
-  }
+	art-panel[size],
+	.arts-masonry-cta {
+		grid-column: var(--masonry-column-md);
+		grid-row: var(--masonry-row-md);
+	}
 }
 
 @media (min-width: 1200px) {
-  art-panel[size],
-  .arts-masonry-cta {
-    grid-column: var(--masonry-column-xl);
-    grid-row: var(--masonry-row-xl);
-  }
+	art-panel[size],
+	.arts-masonry-cta {
+		grid-column: var(--masonry-column-xl);
+		grid-row: var(--masonry-row-xl);
+	}
 }
 
 .carousel-track {
-  display: flex;
-  gap: 0;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
+	display: flex;
+	gap: 20px;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	scroll-behavior: smooth;
+	-webkit-overflow-scrolling: touch;
+	padding-left: 16px;
+	scrollbar-width: thin;
+	scrollbar-color: var(--ml-brand) transparent;
+}
+
+.carousel-slide {
+	flex: 0 0 100%;
+	scroll-snap-align: center;
 }
+
+/* Chrome/Safari/Edge */
 .carousel-track::-webkit-scrollbar {
-  display: none;
+	height: 4px;
 }
-.carousel-slide {
-  flex: 0 0 100%;
-  scroll-snap-align: start;
+
+.carousel-track::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.carousel-track::-webkit-scrollbar-thumb {
+	background: var(--ml-brand);
+	border-radius: 4px;
 }
\ No newline at end of file
diff --git a/src/layouts/base.ejs b/src/layouts/base.ejs
index 179a5ff..2e28fb4 100644
--- a/src/layouts/base.ejs
+++ b/src/layouts/base.ejs
@@ -19,7 +19,8 @@ if (it.area === "main"){
 	<meta name="color-scheme" content="dark light">
 	<link rel="stylesheet" href="/assets/style/style.min.css">
 	<link rel="icon" href="/assets/img/favicon.png" type="image/x-icon">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
+	<link id="hljs-light" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css">
+	<link id="hljs-dark" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

From f026c1bfa22e5370778324e348ee22783d424c71 Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Wed, 5 Aug 2026 13:56:28 +0300
Subject: [PATCH 6/7] fix hero-slider and add light theme highlight

---
 src/assets/script/art-slider.js | 15 ++++++++-------
 src/assets/style/style.scss     |  9 +++++++++
 src/index.ejs                   |  6 +++---
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/assets/script/art-slider.js b/src/assets/script/art-slider.js
index 11a8230..0a3b704 100644
--- a/src/assets/script/art-slider.js
+++ b/src/assets/script/art-slider.js
@@ -28,15 +28,16 @@ class ArtsSlider extends HTMLElement {
 			simulateTouch: false,
 			allowTouchMove: true,
 			autoplay: true,
-			grabCursor: false
+			grabCursor: false,
+			on: {
+				init: () => {
+					this.querySelector('.swiper-wrapper')?.classList.remove('carousel-track');
+					this.querySelectorAll('.swiper-slide').forEach((s) => s.classList.remove('carousel-slide'));
+					this.classList.remove('no-js');
+				},
+			},
 		});
-
-		this.querySelector('.swiper-wrapper').classList.remove('carousel-track');
-		this.querySelectorAll('.swiper-slide').forEach(s => s.classList.remove('carousel-slide'));
-		this.querySelector('.prev')?.classList.remove('O0', 'Vs-h');
-		this.querySelector('.next')?.classList.remove('O0', 'Vs-h');
 	}
-
 }
 
 customElements.define('arts-slider', ArtsSlider);
diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index b19d09d..913796a 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -1,4 +1,11 @@
 @use 'mlut' with (
+	$utils-config: (
+		'states': (
+			'custom': (
+				'nojs': '.no-js',
+			),
+		),
+	),
 	$jit: (
 		'output': 'dist/assets/style/style.min.css',
 		'content': ['src/**/*.ejs','src/**/*.json','src/assets/script/**/*.js'],
@@ -6,6 +13,8 @@
 	),
 );
 
+@include mlut.apply(('-nojs _O0', '-nojs _Vs-h'), (), true);
+
 a {
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	-webkit-touch-callout: none;
diff --git a/src/index.ejs b/src/index.ejs
index 34df5a6..c422e47 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -58,8 +58,8 @@ area: 'main'
 
 
 	<div class="Ps D-f Fld-c Ai-c Jc-c Gap2u Bgc-tp W100p md_W604 md_Gap4u md_M14u;0;6u lg_W100p lg_M0 lg_Gc2 lg_Gr1/4 Zi2">
-		<arts-slider class="D-f Ai-fs Jc-c Fl1 W100p Gap6.5u md_Gap30u lg_Gap15u xl_Gap20u xxl_Gap25u">
-				<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs O0 Vs-h">
+		<arts-slider class="D-f Ai-fs Jc-c Fl1 W100p Gap6.5u md_Gap30u lg_Gap15u xl_Gap20u xxl_Gap25u no-js">
+				<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs -nojs_O0 -nojs_Vs-h">
 					<svg class="Tf -Rt180d C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
 						<use href="/assets/img/icons.svg#arrow-slider"></use>
 					</svg>
@@ -85,7 +85,7 @@ area: 'main'
 						</div>
 					</div>
 				</div>
-				<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs O0 Vs-h">
+				<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs -nojs_O0 -nojs_Vs-h">
 					<svg class="C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
 						<use href="/assets/img/icons.svg#arrow-slider"></use>
 					</svg>

From 392dbe95f01c989dd6a57bfb5b1fe35b042cf3ab Mon Sep 17 00:00:00 2001
From: Oleg Ostapchuk <ostapchukoleg1985@gmail.com>
Date: Wed, 5 Aug 2026 21:17:29 +0300
Subject: [PATCH 7/7] fix comments after review

---
 src/assets/style/style.scss | 27 +--------------------------
 src/index.ejs               |  6 +++---
 2 files changed, 4 insertions(+), 29 deletions(-)

diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss
index 913796a..36bf08a 100644
--- a/src/assets/style/style.scss
+++ b/src/assets/style/style.scss
@@ -1,11 +1,4 @@
 @use 'mlut' with (
-	$utils-config: (
-		'states': (
-			'custom': (
-				'nojs': '.no-js',
-			),
-		),
-	),
 	$jit: (
 		'output': 'dist/assets/style/style.min.css',
 		'content': ['src/**/*.ejs','src/**/*.json','src/assets/script/**/*.js'],
@@ -13,8 +6,6 @@
 	),
 );
 
-@include mlut.apply(('-nojs _O0', '-nojs _Vs-h'), (), true);
-
 a {
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	-webkit-touch-callout: none;
@@ -309,26 +300,10 @@ art-panel[size],
 	scroll-snap-type: x mandatory;
 	scroll-behavior: smooth;
 	-webkit-overflow-scrolling: touch;
-	padding-left: 16px;
-	scrollbar-width: thin;
-	scrollbar-color: var(--ml-brand) transparent;
+	height: 100%;;
 }
 
 .carousel-slide {
 	flex: 0 0 100%;
 	scroll-snap-align: center;
 }
-
-/* Chrome/Safari/Edge */
-.carousel-track::-webkit-scrollbar {
-	height: 4px;
-}
-
-.carousel-track::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-.carousel-track::-webkit-scrollbar-thumb {
-	background: var(--ml-brand);
-	border-radius: 4px;
-}
\ No newline at end of file
diff --git a/src/index.ejs b/src/index.ejs
index c422e47..f8b974b 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -59,7 +59,7 @@ area: 'main'
 
 	<div class="Ps D-f Fld-c Ai-c Jc-c Gap2u Bgc-tp W100p md_W604 md_Gap4u md_M14u;0;6u lg_W100p lg_M0 lg_Gc2 lg_Gr1/4 Zi2">
 		<arts-slider class="D-f Ai-fs Jc-c Fl1 W100p Gap6.5u md_Gap30u lg_Gap15u xl_Gap20u xxl_Gap25u no-js">
-				<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs -nojs_O0 -nojs_Vs-h">
+				<button class="prev W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs :-nojs_O0 :-nojs_Vs-h">
 					<svg class="Tf -Rt180d C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
 						<use href="/assets/img/icons.svg#arrow-slider"></use>
 					</svg>
@@ -71,7 +71,7 @@ area: 'main'
 					<svg class="D-n md_D Ps-a L70p T-20p C-$core800" width="37" height="37">
 						<use href="/assets/img/decor.svg#squareDot"></use>
 					</svg>
-					<div class="W100p P0 md_P2u md_Bgc-$core400 md_Bxsd0;0;0;0.5u;$core900">
+					<div class="W100p P0 md_P1u md_Bgc-$core400 md_Bxsd0;0;0;0.5u;$core900">
 						<div class="swiper W100p Bgc-tp Apcr1 Ov-h">
 							<div class="swiper-wrapper carousel-track">
 								<% if (filteredArts.length) { %>
@@ -85,7 +85,7 @@ area: 'main'
 						</div>
 					</div>
 				</div>
-				<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs -nojs_O0 -nojs_Vs-h">
+				<button class="next W48 Apcr1 As-c Bgc-tp Bd-n P0 Cs :-nojs_O0 :-nojs_Vs-h">
 					<svg class="C-$brand C-$brand500_h C-$brand200_a Ts-$shortTs sm_W5.5u sm_H9u" width="17" height="29">
 						<use href="/assets/img/icons.svg#arrow-slider"></use>
 					</svg>