fix: put description under image

src/components/recipes-components/recipe-info/index.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'react-router';
 
 type RecipeInfoProps = {
 	img: string;
+	description: string;
 	recipeNutrients: {
 		proteins: number;
 		fats: number;
@@ -12,12 +13,13 @@ type RecipeInfoProps = {
 	};
 };
 
-const RecipeInfo: React.FC<RecipeInfoProps> = ({ img, recipeNutrients }) => {
+const RecipeInfo: React.FC<RecipeInfoProps> = ({ img, description, recipeNutrients }) => {
 	const { id } = useParams();
 	return (
 		<div className={styles['recipe-info']}>
 			<div className={styles['recipe-info__image']}>
 				<img src={img} alt={id} />
+				<p className={styles['recipe-info__description']}>{description}</p>
 			</div>
 			<p className={styles['recipe-info__info']}>Энергетическая ценность на порцию</p>
 			<EnergyValue {...recipeNutrients} />

src/components/recipes-components/recipe-info/recipe-info.module.scss

@@ -18,18 +18,19 @@
 		}
 	}
 
-	&__description {
-		margin: 0;
-		font-size: 20px;
-		line-height: 140%;
-		margin-bottom: 20px;
-	}
-
 	&__info {
 		margin: 0;
 		font-size: 22px;
 		font-weight: 500;
 		line-height: 140%;
 		margin-bottom: 8px;
 	}
+
+	&__description {
+		margin: 0;
+		padding-top: 16px;
+		font-size: 20px;
+		font-weight: 400;
+		line-height: 140%;
+	}
 }

src/pages/recipe/index.tsx

@@ -182,13 +182,17 @@ const Recipe: React.FC = () => {
 							</p>
 						</div>
 						<div className={styles.recipes__info}>
-							<RecipeInfo img={recipeInfo.image} recipeNutrients={recipeNutrients} />
+							<RecipeInfo
+								img={recipeInfo.image}
+								recipeNutrients={recipeNutrients}
+								description={recipeByLines[1]}
+							/>
 						</div>
 					</div>
 					<div className={clsx(styles.recipes__instructions, styles.instructions)}>
 						<p className={styles.instructions__title}>Инструкция приготовления</p>
 						<div className={styles.instructions__list}>
-							{recipeByLines.map((line, index) => (
+							{recipeByLines.slice(2).map((line, index) => (
 								<p key={index} className={styles.instructions__item}>
 									{line}
 								</p>

src/pages/recipe/recipe.module.scss

@@ -90,10 +90,6 @@
 		margin-bottom: 25px;
 	}
 
-	&__item:first-child {
-		font-weight: 500;
-	}
-
 	&__item:last-child {
 		margin: 0;
 	}