Fix components

src/app/categories/[categories-detail]/page.tsx

@@ -84,6 +84,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
   const slidesList: SlideItem[] = category.slider?.map((image) => ({
     id: image._id,
     image: getImageUrl(image._id, 800, 500),
+    imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }),
     alt: image.title || category.title,
   }))
 

src/app/in-stock/[in-stock-detail]/page.tsx

@@ -75,6 +75,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
     work.slider?.map((image) => ({
       id: image._id,
       image: getImageUrl(image._id, 800, 500),
+      imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }),
       alt: image.title || work.title,
     })) || []
 

src/app/news/[news-detail]/page.tsx

@@ -75,6 +75,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
     news.slider?.map((image) => ({
       id: image._id,
       image: getImageUrl(image._id, 800, 500),
+      imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }),
       alt: image.title || news.title,
     })) || []
 

src/app/works/[works-detail]/page.tsx

@@ -75,6 +75,7 @@ export default async function Page({ params }: PageProps): Promise<JSX.Element>
     work.slider?.map((image) => ({
       id: image._id,
       image: getImageUrl(image._id, 800, 500),
+      imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }),
       alt: image.title || work.title,
     })) || []
 

src/components/AboutPage/AboutPage.module.scss

@@ -24,4 +24,14 @@
 
 .about__text {
   font-size: 22px;
+
+  @media (max-width: $desktop-min-width) {
+    font-size: 20px;
+  }
+  @media (max-width: $tablet-min-width) {
+    font-size: 18px;
+  }
+  @media (max-width: $mobile-mid-width) {
+    font-size: 16px;
+  }
 }

src/components/AboutPage/AboutPage.tsx

@@ -18,6 +18,7 @@ export default async function AboutPage(): Promise<JSX.Element> {
   const slidesList: SlideItem[] = about.slider?.map((image) => ({
     id: image._id,
     image: getImageUrl(image._id, 800, 500),
+    imageFull: getImageUrl(image._id, 1600, 1000, { mode: 'bestFit' }),
     alt: image.title || about.title,
   }))
 

src/components/Detail/Detail.module.scss

@@ -22,9 +22,15 @@
 .detail__text {
   font-size: 22px;
 
+  @media (max-width: $desktop-min-width) {
+    font-size: 20px;
+  }
   @media (max-width: $tablet-min-width) {
     font-size: 18px;
   }
+  @media (max-width: $mobile-mid-width) {
+    font-size: 16px;
+  }
 }
 
 .detail__price-block {

src/components/GalleryBlock/GalleryBlock.tsx

@@ -35,7 +35,7 @@ export default function GalleryBlock({
     if (!containerRef.current) return
 
     const dynamicEl = hasSlides
-      ? slidesList.map((item) => ({ src: item.image, thumb: item.image, alt: item.alt }))
+      ? slidesList.map((item) => ({ src: item.imageFull || item.image, thumb: item.image, alt: item.alt }))
       : [{ src: imageFullSrc, thumb: imageSrc, alt: imageAlt }]
 
     lgInstanceRef.current = lightGallery(containerRef.current, {

src/components/Main/InStock/InStock.module.scss

@@ -9,13 +9,13 @@
   grid-auto-rows: 1fr;
   gap: 30px;
 
-  @media (max-width: $desktop-min-width) {
+  @media (max-width: $desktop-mid-width) {
     grid-template-columns: 1fr 1fr 1fr;
   }
   @media (max-width: $tablet-mid-width) {
     grid-template-columns: 1fr 1fr;
   }
-  @media (max-width: $tablet-min-width) {
+  @media (max-width: $mobile-mid-width + 100) {
     grid-template-columns: 1fr;
   }
 }

src/components/Main/Process/Process.module.scss

@@ -79,6 +79,9 @@
   border-radius: 40px;
   aspect-ratio: 4 / 3;
 
+  @media (max-width: $desktop-mid-width) {
+    max-height: 400px;
+  }
   @media (max-width: $tablet-min-width) {
     grid-row: 1 / 2;
     max-height: 300px;

src/components/Main/Restoration/Restoration.module.scss

@@ -45,7 +45,7 @@
   height: 500px;
 
   @media (max-width: $tablet-min-width) {
-    grid-row: 3 / 4;
+    grid-row: 2 / 3;
     grid-column: 1 / -1;
     height: 100%;
   }
@@ -66,7 +66,7 @@
     font-size: 20px;
   }
   @media (max-width: $tablet-min-width) {
-    grid-row: 2 / 3;
+    grid-row: 3 / 4;
     grid-column: 1 / -1;
 
     font-size: 18px;

src/components/Payment/Payment.module.scss

@@ -5,4 +5,14 @@
 
 .payment__info {
   font-size: 22px;
+
+  @media (max-width: $desktop-min-width) {
+    font-size: 20px;
+  }
+  @media (max-width: $tablet-min-width) {
+    font-size: 18px;
+  }
+  @media (max-width: $mobile-mid-width) {
+    font-size: 16px;
+  }
 }

src/types/types.ts

@@ -50,6 +50,7 @@ export type SlideItem = {
   id: string
   image: string
   alt: string
+  imageFull?: string
   href?: string
 }