update styling when no image is available

content/catalog/index.md

@@ -110,9 +110,6 @@ catalog:
   installBreakdown: $50
   purchaseCost: $330
   cat: Backdrops
-  thumbnail: 
-  gallery:
-  - image:
 
 - item: Curvy Stands
   quant: 5
@@ -494,9 +491,6 @@ catalog:
   installBreakdown: $280
   purchaseCost: $1,320
   cat: Arches
-  thumbnail: 
-  gallery:
-  - image:
 
 - item: Large 8ft Chuppah
   quant: 1

themes/gallo/layouts/partials/rental_catalog.html

@@ -37,12 +37,18 @@
   <div
     class="flex flex-col justify-between bg-white rounded-lg border p-4 relative"
   >
+    {{ if .thumbnail }}
     <img
       loading="lazy"
       src="{{ .thumbnail }}"
       alt="Thumbnail"
       class="w-full h-52 rounded-md object-cover"
     />
+    {{ else }}
+
+    <div class="w-full h-52 rounded-md object-cover border-2 border-gray-200 bg-gray-100"></div>
+
+    {{ end }}
     <div class="px-1 pt-4">
       <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
         {{ .item }} {{ if ne .cat "" }}
@@ -86,14 +92,14 @@
     <div class="flex flex-col gap-4">
       {{ if ne .purchaseCost "" }}
       <div
-        class="flex flex-row justify-between border-[3px] rounded-lg px-4 h-10 py-[0.275rem] w-full"
+        class="flex flex-row justify-between border-2 rounded-lg px-4 h-10 py-[0.275rem] w-full"
       >
         <strong>Purchase Cost:</strong>
         <span>{{ .purchaseCost }}</span>
       </div>
       {{ else }}
       <div
-        class="flex justify-center border-[3px] rounded-lg px-4 h-10 py-[0.275rem] text-gray-600 mt-4 w-full"
+        class="flex justify-center border-2 rounded-lg px-4 h-10 py-[0.275rem] text-gray-600 mt-4 w-full"
       >
         <strong>Purchase Unavailable</strong>
       </div>
@@ -208,14 +214,14 @@
                     </div>
                     {{ end }} {{ if ne .purchaseCost "" }}
                     <div
-                      class="flex flex-row justify-between border-[3px] rounded-lg px-4 h-10 py-[0.275rem] w-full mt-4"
+                      class="flex flex-row justify-between border-2 rounded-lg px-4 h-10 py-[0.275rem] w-full mt-4"
                     >
                       <strong>Purchase Cost:</strong>
                       <span>{{ .purchaseCost }}</span>
                     </div>
                     {{ else }}
                     <div
-                      class="flex justify-center border-[3px] rounded-lg px-4 h-10 py-[0.275rem] text-gray-600 mt-4 w-full"
+                      class="flex justify-center border-2 rounded-lg px-4 h-10 py-[0.275rem] text-gray-600 mt-4 w-full"
                     >
                       <strong>Purchase Unavailable</strong>
                     </div>