From b65377dee49e5e6ecc2d31a2f2ee1207bbf5d592 Mon Sep 17 00:00:00 2001
From: Dominik Polakovics <dominik.polakovics@cloonar.com>
Date: Mon, 23 Jun 2025 16:54:04 +0200
Subject: [PATCH] fix: update card image styling for improved visibility and
 layout

---
 .../card_container/templates/frontend.html                | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
index db56da1..fc21f5d 100644
--- a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
@@ -25,7 +25,7 @@
                             <div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
                                 <f:if condition="{card.images}">
                                     <f:then>
-                                      <picture class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
+                                      <picture class="w-full h-full object-cover transition-all duration-500">
                                         <!-- WEBP source -->
                                         <source
                                           type="image/webp"
@@ -59,9 +59,9 @@
                                         </div>
                                     </f:else>
                                 </f:if>
-                                <div class="absolute inset-0 bg-black bg-opacity-40 flex flex-col items-center justify-center">
+                                <div class="absolute inset-0 bg-white bg-opacity-80 flex flex-col items-center justify-center">
                                     <div class="w-full">
-                                        <h3 class="text-white text-xl font-bold text-center px-4">{card.header}</h3>
+                                        <h3 class="text-black text-xl font-bold text-center px-4">{card.header}</h3>
                                     </div>
                                     <div class="w-full text-center">
                                         <div class="w-6 h-6 bg-primary text-white rounded-full inline-flex items-center justify-center">
@@ -72,7 +72,7 @@
                             </div>
 
                             <div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-light-grey border border-dark-grey p-6">
-                                <h4>{card.header}</h4>
+                                <h4 class="text-center">{card.header}</h4>
                                 <div class="text-sm">
                                     <f:format.html>{card.bodytext}</f:format.html>
                                 </div>