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,