feat: many changes

packages/base/Resources/Public/Scss/components/_card-container.scss

@@ -0,0 +1,51 @@
+.card-container {
+    // Container styles if needed
+}
+
+.perspective {
+    perspective: 1000px;
+}
+
+.preserve-3d {
+    transform-style: preserve-3d;
+}
+
+.rotate-y-180 {
+    transform: rotateX(180deg);
+}
+
+.backface-hidden {
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden; /* Safari */
+}
+
+// Ensure the back is initially hidden and rotated
+.card-back {
+    transform: rotateX(180deg);
+}
+
+// Flip on hover/focus-within the group
+.group:hover .card-flip-inner,
+.group:focus-within .card-flip-inner {
+    transform: rotateX(180deg);
+}
+
+// Style the front overlay and title
+.card-front {
+    .absolute { // The overlay div
+        transition: background-color 0.3s ease;
+    }
+    h3 {
+        transition: opacity 0.3s ease;
+    }
+}
+
+// Fade out overlay slightly on hover to reveal image more
+.group:hover .card-front .absolute {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+// Optional: Hide front title on hover if desired
+// .group:hover .card-front h3 {
+//     opacity: 0;
+// }