опять фиксим слайдеры + верстку

src/components/swiper/MediaSwiper.tsx

@@ -5,19 +5,24 @@ import { cn } from '@/libs/cn'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
+import {isAboveBreakpoint} from '@/libs/breakpoint'
 
 export type MediaSwiperProps = SwiperProps & {
   images: ImportAttributes[]
   imageClassName?: string
+  slideClassName?: string
 }
 
+const isMd = isAboveBreakpoint('MD')
+
 export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
-  ({ images, className, modules = [], slideClass, imageClassName, ...otherProps }, ref) => {
+  ({ images, className, modules = [], slideClassName, imageClassName, ...otherProps }, ref) => {
     return (
       <Swiper
         ref={ref}
         modules={[Navigation, Pagination, A11y, ...modules]}
         slidesPerView={1}
+        navigation={isMd}
         spaceBetween={24}
         pagination={{
           clickable: true,
@@ -28,7 +33,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
         {...otherProps}
       >
         {images.map((image, index) => (
-          <SwiperSlide key={index} className={slideClass}>
+          <SwiperSlide key={index} className={slideClassName}>
             <img
               {...image}
               loading={index === 0 ? 'eager' : 'lazy'}
@@ -39,6 +44,7 @@ export const MediaSwiper = React.forwardRef<SwiperRef, MediaSwiperProps>(
                 imageClassName
               )}
             />
+            <div className="swiper-lazy-preloader border-brand"></div>
           </SwiperSlide>
         ))}
       </Swiper>