diff --git a/src/pages/recipe/Recipe.tsx b/src/pages/recipe/Recipe.tsx
index df0b147..c3c38f6 100644
--- a/src/pages/recipe/Recipe.tsx
+++ b/src/pages/recipe/Recipe.tsx
@@ -13,15 +13,17 @@ const Recipe = ({ recipe, imgUrl }: RecipeProps) => {
return (
+
+
+
{recipe.title}
+
+
+
+
+
+
+
-
-
{recipe.title}
-
-
-
-
-
-
diff --git a/src/pages/recipe/recipe.module.css b/src/pages/recipe/recipe.module.css
index d41c4aa..52c4eb3 100644
--- a/src/pages/recipe/recipe.module.css
+++ b/src/pages/recipe/recipe.module.css
@@ -1,19 +1,30 @@
.full-recipe-container {
display: flex;
flex-direction: column;
- align-items: center;
- max-width: 100%;
}
.full-recipe {
- max-width: 600px;
+ max-width: 80ch;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
}
-.full-recipe .main-image {
- width: 100%;
+.info {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
}
-.full-recipe .info-row {
+.info-row {
display: flex;
justify-content: space-between;
}
+
+.recipe-title {
+ margin-block: 0.5em;
+}
+
+.main-image {
+ width: 100%;
+}