готовый проект без бекенда

src/app/everlastingMemory/deceased/[id]/page.tsx

@@ -40,6 +40,45 @@ const Section = styled.div`
 		}
 	}
 
+	${(props) => props.theme.mediaQueries.tabletLandscape} {
+		.user-section {
+
+			img {
+				width: 400px;
+				height: 280px;
+			}
+
+			h1 {
+				font-size: 28px;
+				font-weight: 500;
+				text-align: start;
+			}
+		}
+	}
+
+	${(props) => props.theme.mediaQueries.tabletPortrait} {
+
+		.user-section {
+			flex-direction: column;
+			img {
+				object-fit: cover;
+				width: 100%;
+				height: 430px;
+			}
+		}
+	}
+
+	${(props) => props.theme.mediaQueries.slimMobile} {
+		.user-section {
+			
+			img {
+				object-fit: cover;
+				width: 100%;
+				height: 280px;
+			}
+		}
+	}
+
 	.description-section {
 		h3 {
 			text-align: justify;
@@ -111,6 +150,42 @@ const MapSection = styled.div`
 		width: 100%;
 		height: 450px;
 	}
+
+	${(props) => props.theme.mediaQueries.tabletLandscape} {
+		.content {
+			gap: 5px;
+			left: 5%;
+
+			h3 {
+				font-size: 16px;
+			}
+
+			p {
+				font-size: 14px;
+			}
+		}
+	}
+
+	${(props) => props.theme.mediaQueries.tabletPortrait} {
+		h3 {
+			display: none;
+		}
+
+		.content {
+			left: 0;
+			right: 0;
+			border-radius: 0;
+			position: relative;
+			transform: translateY(0);
+			display: grid;
+			grid-template-columns: 1fr;
+
+			p {
+				max-width: 200px;
+				width: 100%;
+			}
+		}
+	}
 `
 
 export default function page({ params }: Props) {
@@ -211,12 +286,6 @@ export default function page({ params }: Props) {
 			<MapSection>
 				<h1>Расположение участка захоронения</h1>
 				<YMaps>
-					<div className='content'>
-						<h3>Расположение участка</h3>
-						<p>Кладбище: Градское</p>
-						<p>Квартал: 7</p>
-						<p>Участок: 32453</p>
-					</div>
 					<Map
 						className='map'
 						defaultState={{
@@ -232,6 +301,12 @@ export default function page({ params }: Props) {
 					>
 						<Placemark geometry={[55.684758, 37.738521]} />
 					</Map>
+					<div className='content'>
+						<h3>Расположение участка</h3>
+						<p>Кладбище: Градское</p>
+						<p>Квартал: 7</p>
+						<p>Участок: 32453</p>
+					</div>
 				</YMaps>
 			</MapSection>
 		</>

src/app/everlastingMemory/deceased/page.tsx

@@ -52,8 +52,8 @@ const Section = styled.div`
 	${(props) => props.theme.mediaQueries.tabletLandscape} {
 		.item {
 			img {
-				height: 200px;
-				width: 300px;
+				height: 250px;
+				width: 100%;
 			}
 		}
 	}
@@ -66,32 +66,36 @@ const Section = styled.div`
 
 	${(props) => props.theme.mediaQueries.tabletPortrait} {
 		.list {
-			grid-template-columns: 1fr;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
 		}
 
 		.user-logo {
 			display: none;
 		}
 
-		.slider {
-			display: block;
-			max-width: 470px;
-			max-height: 340px;
-			border-radius: 12px;
-			overflow: hidden;
-
-			img {
-				border-radius: 0;
-				height: 100%;
+		.item {
 width: 100%;
-				max-width: 470px;
-				max-height: 340px;
+			img {
+				height: 340px;
+				border-radius: 0;
 				object-fit: cover;
 			}
 		}
-	}
 
-	${(props) => props.theme.mediaQueries.mobile} {
+		.slider {
+			display: block;
+			border-radius: 12px;
+			overflow: hidden;
+			height: 340px;
+			/* max-width: 470px; */
+
+
+			.slick-track {
+				display: flex;
+			}
+		}
 	}
 `
 
@@ -106,8 +110,7 @@ const some_cool_mans = [
 	{ images: ['/old men.png', '/image 7.png'] }
 ] as man[]
 
-export default function Page({}: Props) {
-	const setting = {
+const settings = {
 	infinite: true,
 	slidesToShow: 1,
 	slidesToScroll: 1,
@@ -116,6 +119,7 @@ export default function Page({}: Props) {
 	dots: false
 }
 
+export default function Page({}: Props) {
 	const onEnterMouse =
 		(some_man: man) =>
 		(event: React.MouseEvent<HTMLImageElement>): void => {
@@ -150,16 +154,10 @@ export default function Page({}: Props) {
 									onMouseLeave={onLeaveMouse(item)}
 									className='user-logo'
 								/>
-								<div className='slider'>
-									<Slider {...setting}>
-										<div>
+								<Slider {...settings} className='slider'>
 									<img src={item.images[0]} />
-										</div>
-										<div>
 									<img src={item.images[1]} />
-										</div>
 								</Slider>
-								</div>
 							</Link>
 							<h3>Иванов Иван Иванович</h3>
 							<div className='data'>

src/app/styles.ts

@@ -474,7 +474,7 @@ export const ReviewsContainer = styled.div`
 	}
 
 	.slick-slide {
-		display: flex;
+		display: fleFx;
 		justify-content: center;
 		padding: 0 10px;
 	}

src/components/layout/Header/Header.tsx

@@ -20,7 +20,6 @@ export default function Header({}: Props) {
 
 	const pathname = usePathname()
 
-	
 	useEffect(() => {
 		setMenuState(false)
 	}, [pathname])
@@ -82,11 +81,9 @@ export default function Header({}: Props) {
 								onClick={() => setMenuState(true)}
 							/>
 						</div>
-
 					</div>
 					<div className='menu-container'>
 						<div className='title-active'>
-
 							<div className='contact'>
 								<div className='addresses'>
 									<p>ул. Курчатова, д. 4</p>