From dad6253877216af0cb0e5316f20ec6c44deb4816 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 23 Nov 2025 16:18:23 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B0,=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=B4=D0=BE=D0=BA=D1=83=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EventsCarousel/EventsCarousel.module.scss |  4 +-
 .../TimeFrameSlider.module.scss               | 38 ++++++++++---------
 .../ui/TimeFrameSlider/TimeFrameSlider.tsx    |  1 +
 3 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss
index 6b8db76..c7b0618 100644
--- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss
+++ b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss
@@ -33,7 +33,7 @@
 }
 
 :global(.swiper) {
-    @container timeframe-slider (width <=768px) {
+    @container timeframe-slider (width <= 768px) {
         padding: 0 40px;
     }
 }
@@ -41,7 +41,7 @@
 :global(.swiper-slide-visible) {
     transition: opacity 0.3s ease;
 
-    @container timeframe-slider (width <768px) {
+    @container timeframe-slider (width < 768px) {
         opacity: 0.4;
     }
 }
diff --git a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss
index a3644cd..c478744 100644
--- a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss
+++ b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss
@@ -30,11 +30,11 @@
 
     overflow: hidden;
 
-    @container timeframe-slider (width <=1024px) {
+    @container timeframe-slider (width <= 1024px) {
         padding-top: 100px;
     }
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         padding: 60px 20px 20px;
 
         background-image: unset;
@@ -58,18 +58,19 @@
     border-image: var(--gradient-primary) 1;
 
 
-    @container timeframe-slider (width <=1024px) {
+    @container timeframe-slider (width <= 1024px) {
         top: 80px;
 
         font-size: 40px;
     }
 
-    @container timeframe-slider (width <=768px) {
+    @container timeframe-slider (width <= 768px) {
         padding-left: 20px;
+
         font-size: 34px;
     }
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         position: relative;
         inset: unset;
 
@@ -96,7 +97,7 @@
     background-position: center;
     background-size: 100% 1px;
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         position: unset;
 
         display: flex;
@@ -122,17 +123,18 @@
 
     transform-origin: left;
 
-    @container timeframe-slider (width <=1024px) {
+    @container timeframe-slider (width <= 1024px) {
         left: 100px;
         bottom: 40px;
     }
 
-    @container timeframe-slider (width <=768px) {
+    @container timeframe-slider (width <= 768px) {
         left: 40px;
+
         gap: 10px;
     }
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         left: 20px;
         bottom: 13px;
 
@@ -152,7 +154,7 @@
     display: flex;
     gap: 20px;
 
-    @container timeframe-slider (width <=768px) {
+    @container timeframe-slider (width <= 768px) {
         gap: 8px;
     }
 }
@@ -161,7 +163,7 @@
     width: 9px;
     height: 14px;
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         width: 6px;
         height: 11.5px;
     }
@@ -170,7 +172,7 @@
 .dots {
     display: none;
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         position: absolute;
         left: 50%;
         bottom: 32px;
@@ -228,19 +230,19 @@
 
     pointer-events: none;
 
-    @container timeframe-slider (width <=1024px) {
+    @container timeframe-slider (width <= 1024px) {
         gap: 40px;
 
         font-size: 140px;
         line-height: 120px;
     }
 
-    @container timeframe-slider (width <=768px) {
+    @container timeframe-slider (width <= 768px) {
         font-size: 100px;
         line-height: 80px;
     }
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         position: static;
 
         gap: 20px;
@@ -265,7 +267,7 @@
 .periodLabel {
     display: none;
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         order: 1;
 
         display: block;
@@ -285,7 +287,7 @@
     width: 100%;
     height: 100%;
 
-    @container timeframe-slider (width <=576px) {
+    @container timeframe-slider (width <= 576px) {
         display: none;
     }
 }
@@ -293,7 +295,7 @@
 .carouselContainer {
     padding: 55px 80px 105px;
 
-    @container timeframe-slider (width <=768px) {
+    @container timeframe-slider (width <= 768px) {
         width: calc(100% + 40px);
         margin: 0 -20px;
         padding: 0;
diff --git a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx
index aa7d3b6..271a893 100644
--- a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx
+++ b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx
@@ -101,6 +101,7 @@ export const TimeFrameSlider = memo(() => {
       prevYearFromRef.current = currentPeriod.yearFrom
       prevYearToRef.current = currentPeriod.yearTo
 
+      // Анимация появления лейбла периода
       if (periodLabelRef.current) {
         gsap.fromTo(
           periodLabelRef.current,