diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss index d968c58..06d766a 100644 --- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss +++ b/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; } } diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts b/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts index 7697fff..b7f3c96 100644 --- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/constants.ts +++ b/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, diff --git a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss index ac0ff57..b4ba1ef 100644 --- a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss +++ b/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; } } \ No newline at end of file