refactor: Адаптив виджета переработан на использование container quries

src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss

@@ -33,27 +33,19 @@
 }
 
 :global(.swiper) {
-    @media (width <=768px) {
+    @container timeframe-slider (width <=768px) {
-        padding: 0 20px;
+        padding: 0 40px;
     }
 }
 
-:global(.swiper-slide-next) {
+:global(.swiper-slide-visible) {
     transition: opacity 0.3s ease;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <768px) {
         opacity: 0.4;
     }
 }
 
-:global(.swiper-slide-prev) {
+:global(.swiper-slide-fully-visible) {
-    transition: opacity 0.3s ease;
-
-    @media (width <=768px) {
-        opacity: 0.4;
-    }
-}
-
-:global(.swiper-slide-active) {
     opacity: 1;
 }

src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts

@@ -16,7 +16,7 @@ export const EVENT_CAROUSEL_CONFIG: SwiperOptions = {
   },
   breakpoints: {
     576: {
-      slidesPerView: 2,
+      slidesPerView: 2.5,
     },
     768: {
       slidesPerView: 2,

src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss

@@ -1,3 +1,10 @@
+/* Wrapper для container queries - должен быть родителем контейнера */
+.wrapper {
+    /* Включаем container queries для адаптивности виджета */
+    container-type: inline-size;
+    container-name: timeframe-slider;
+}
+
 .container {
     position: relative;
 
@@ -23,11 +30,11 @@
 
     overflow: hidden;
 
-    @media (width <=1024px) {
+    @container timeframe-slider (width <=1024px) {
         padding-top: 100px;
     }
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=576px) {
         padding: 60px 20px 20px;
 
         background-image: unset;
@@ -51,20 +58,24 @@
     border-image: var(--gradient-primary) 1;
 
 
-    @media (width <=1024px) {
+    @container timeframe-slider (width <=1024px) {
         top: 80px;
 
         font-size: 40px;
     }
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=768px) {
+        padding-left: 20px;
+        font-size: 34px;
+    }
+
+    @container timeframe-slider (width <=576px) {
         position: relative;
         inset: unset;
 
         margin-bottom: 20px;
         padding-left: 0;
 
-        font-size: 20px;
 
         border: none;
     }
@@ -85,7 +96,7 @@
     background-position: center;
     background-size: 100% 1px;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=576px) {
         position: unset;
 
         display: flex;
@@ -111,19 +122,22 @@
 
     transform-origin: left;
 
-    @media (width <=1024px) {
+    @container timeframe-slider (width <=1024px) {
         left: 100px;
         bottom: 40px;
     }
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=768px) {
+        left: 40px;
+        gap: 10px;
+    }
+
+    @container timeframe-slider (width <=576px) {
         left: 20px;
         bottom: 13px;
 
         order: 2;
 
-        gap: 10px;
-
         margin-top: 20px;
         padding: 0;
     }
@@ -138,7 +152,7 @@
     display: flex;
     gap: 20px;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=768px) {
         gap: 8px;
     }
 }
@@ -147,7 +161,7 @@
     width: 9px;
     height: 14px;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=576px) {
         width: 6px;
         height: 11.5px;
     }
@@ -156,7 +170,7 @@
 .dots {
     display: none;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=576px) {
         position: absolute;
         left: 50%;
         bottom: 32px;
@@ -214,14 +228,19 @@
 
     pointer-events: none;
 
-    @media (width <=1024px) {
+    @container timeframe-slider (width <=1024px) {
         gap: 40px;
 
         font-size: 140px;
         line-height: 120px;
     }
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=768px) {
+        font-size: 100px;
+        line-height: 80px;
+    }
+
+    @container timeframe-slider (width <=576px) {
         position: static;
 
         gap: 20px;
@@ -246,7 +265,7 @@
 .periodLabel {
     display: none;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=576px) {
         order: 1;
 
         display: block;
@@ -266,7 +285,7 @@
     width: 100%;
     height: 100%;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=576px) {
         display: none;
     }
 }
@@ -274,7 +293,7 @@
 .carouselContainer {
     padding: 55px 80px 105px;
 
-    @media (width <=768px) {
+    @container timeframe-slider (width <=768px) {
         width: calc(100% + 40px);
         margin: 0 -20px;
         padding: 0;

src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx

@@ -132,6 +132,7 @@ export const TimeFrameSlider = memo(() => {
   }, [totalPeriods])
 
   return (
+    <div className={styles.wrapper}>
       <div className={styles.container} ref={containerRef}>
         <h1 className={styles.title}>Исторические даты</h1>
 
@@ -202,6 +203,7 @@ export const TimeFrameSlider = memo(() => {
           ))}
         </div>
       </div>
+    </div>
   )
 })