Images style fix

src/main.js

@@ -239,8 +239,9 @@ function renderRecipes(recipes) {
                     : ""
                 }
                 </div>
-                <div class="recipe-img">
+                <div class="recipe-image-wrapper">
                 <img
+                  class="recipe-image"
                   src="/spirits/${recipe.name?.toLowerCase()}.jpg"
                   alt=""
                   onerror="this.onerror=null; this.src='/spirits/default.png';"

src/styles.css

@@ -272,20 +272,18 @@ h2 {
   .recipe-content {
     width: 100%;
   }
-  .recipe-img {
+  .recipe-image-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: center;
     width: 100%;
-    min-width: 30%;
+    margin-top: 1rem;
-    margin-top: 0.5rem;
   }
 
-  .recipe-img img {
+  .recipe-image {
-    width: 50%;
+    width: 60%;
-    height: 100%;
-    object-fit: contain;
     display: block;
+    border-radius: 1rem;
   }
 }
 
@@ -306,18 +304,19 @@ h2 {
   .recipe-content {
     width: 70%;
   }
-  .recipe-img {
+  .recipe-image-wrapper {
-    width: 30%;
+    display: flex;
-    min-width: 30%;
+    flex-direction: column;
-    max-width: 30%;
+    justify-content: center;
-    margin-left: 0.5rem;
+    align-items: center;
+    width: 35%;
   }
 
-  .recipe-img img {
+  .recipe-image {
+    margin-left: 1rem;
     width: 100%;
-    height: 100%;
-    object-fit: contain;
     display: block;
+    border-radius: 1rem;
   }
 }