feat(SW-272) added mega menu

components/TempDesignSystem/Card/card.module.css

@@ -1,10 +1,11 @@
 .container {
-  align-items: center;
+  position: relative;
   display: flex;
-  border-radius: var(--Corner-radius-Medium);
+  align-items: center;
   flex-direction: column;
-  height: 320px; /* Fixed height from Figma */
   justify-content: center;
+  border-radius: var(--Corner-radius-Medium);
+  height: 320px; /* Fixed height from Figma */
   margin-right: var(--Spacing-x2);
   text-align: center;
   width: 100%;
@@ -12,11 +13,29 @@
   overflow: hidden;
 }
 
+.imageWrapper {
+  display: flex;
+}
+
+.imageWrapper::after {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.36) 50%,
+    rgba(0, 0, 0, 0.75) 100%
+  );
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .image {
   object-fit: cover;
-  overflow: hidden;
   width: 100%;
-  height: auto;
+  height: 100%;
   min-height: 320px; /* Fixed height from Figma */
 }
 
@@ -78,9 +97,10 @@
 .themeImage {
   --font-color: var(--Base-Text-Inverted);
   --script-color: var(--Base-Text-Inverted);
+}
 
-  border: 1px; /* px from Figma */
-  border-color: var(--Base-Border-Subtle);
+.themeImage .content {
+  position: absolute;
 }
 
 .scriptContainer {
@@ -88,7 +108,7 @@
   gap: var(--Spacing-x1);
 }
 
-span.scriptedTitle {
+.scriptedTitle {
   color: var(--script-color);
   padding: var(--Spacing-x1);
   margin: 0;
@@ -98,7 +118,7 @@ span.scriptedTitle {
   color: var(--font-color);
 }
 
-p.bodyText {
+.bodyText {
   color: var(--font-color);
 }