Added recipes images

src/main.js

@@ -5,8 +5,8 @@ let recipesData = [];
 
 async function loadData() {
   try {
-    spiritsData = data.spirits;
-    recipesData = data.recipes;
+    spiritsData = data.spirits.sort((a, b) => a.name > b.name);
+    recipesData = data.recipes.sort((a, b) => a.name > b.name);
     renderSpirits();
     enableButtonsLogic();
   } catch (error) {
@@ -241,7 +241,7 @@ function renderRecipes(recipes) {
                 </div>
                 <div class="recipe-img">
                 <img
-                  src="/public/spirits/${recipe.name?.toLowerCase()}.png"
+                  src="/public/spirits/${recipe.name?.toLowerCase()}.jpg"
                   alt=""
                   onerror="this.onerror=null; this.src='/public/spirits/default.png';"
                 />

src/styles.css

@@ -69,7 +69,7 @@ h1 {
   font-family: "Fredoka", sans-serif;
   font-size: 4.5rem;
   font-weight: 700;
-  color: var(--cognac);
+  color: var(--deep-red);
   margin-bottom: 0.5rem;
   letter-spacing: -0.02em;
   text-shadow:
@@ -375,6 +375,7 @@ h2 {
   width: 30%;
   min-width: 30%;
   max-width: 30%;
+  margin-left: 0.5rem;
 }
 
 .recipe-img img {
@@ -415,7 +416,7 @@ h2 {
     width: 120px;
     padding: 0.2rem 0.3rem;
     font-family: "Fredoka", sans-serif;
-    font-size: 0.5rem;
+    font-size: 0.8rem;
     background: linear-gradient(135deg, var(--deep-red) 0%, var(--cognac) 100%);
     color: white;
     border: none;