feat:

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

@@ -32,10 +32,16 @@
     pointer-events: none;
 }
 
+:global(.swiper) {
+    @media (width <=768px) {
+        padding: 0 20px;
+    }
+}
+
 :global(.swiper-slide-next) {
     transition: opacity 0.3s ease;
 
-    @media (width <=576px) {
+    @media (width <=768px) {
         opacity: 0.4;
     }
 }
@@ -43,7 +49,7 @@
 :global(.swiper-slide-prev) {
     transition: opacity 0.3s ease;
 
-    @media (width <=576px) {
+    @media (width <=768px) {
         opacity: 0.4;
     }
 }

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

@@ -21,6 +21,13 @@ export const EVENT_CAROUSEL_CONFIG: SwiperOptions = {
       slidesPerView: 2,
     },
     768: {
+      slidesPerView: 2,
+      navigation: {
+        enabled: true,
+      },
+      spaceBetween: 25,
+    },
+    1024: {
       slidesPerView: 3,
       navigation: {
         enabled: true,

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

@@ -23,6 +23,10 @@
 
     overflow: hidden;
 
+    @media (width <=1024px) {
+        padding-top: 100px;
+    }
+
     @media (width <=768px) {
         padding: 60px 20px 20px;
 
@@ -47,6 +51,11 @@
     border-image: var(--gradient-primary) 1;
 
 
+    @media (width <=1024px) {
+        top: 80px;
+        font-size: 40px;
+    }
+
     @media (width <=768px) {
         position: relative;
         inset: unset;
@@ -101,6 +110,11 @@
 
     transform-origin: left;
 
+    @media (width <=1024px) {
+        left: 100px;
+        bottom: 40px;
+    }
+
     @media (width <=768px) {
         left: 20px;
         bottom: 13px;
@@ -199,6 +213,12 @@
 
     pointer-events: none;
 
+    @media (width <=1024px) {
+        font-size: 140px;
+        line-height: 120px;
+        gap: 40px;
+    }
+
     @media (width <=768px) {
         position: static;
 
@@ -229,16 +249,21 @@
 
         display: block;
 
-        margin-bottom: 20px;
+        padding-bottom: 20px;
 
         color: var(--color-text);
         font-weight: 700;
         font-size: 16px;
         text-align: left;
+
+        border-bottom: 1px solid #C7CDD9;
     }
 }
 
 .circleContainer {
+    width: 100%;
+    height: 100%;
+
     @media (width <=768px) {
         display: none;
     }
@@ -248,8 +273,8 @@
     padding: 55px 80px 105px;
 
     @media (width <=768px) {
+        margin: 0 -20px;
+        width: calc(100% + 40px);
         padding: 0;
-
-        border-top: 1px solid #C7CDD9;
     }
 }