refactor(stackedComponents): update ElementStack component to use CSS grid for layout instead of flexbox

fix(market-card.tsx): fix variable name in MarketCardComponent to correctly display tags in ElementStack component

src/frontend/src/components/stackedComponents/index.tsx

@@ -6,14 +6,19 @@ interface ElementStackProps {
 
 const ElementStack: React.FC<ElementStackProps> = ({ children }) => {
   return (
-    <div className="relative flex">
+    <div
+      className={`grid grid-cols-3`}
+      style={{ display: "grid", gridAutoFlow: "row" }}
+    >
       {children.map((child, index) => (
         <div
           key={index}
-          className={` transform translate-x-${index * 4} -translate-y-${
+          style={{
-            index * 2
+            gridColumn: 1,
-          } scale-${100 - index * 3}`}
+            gridRow: 1,
-          style={{ zIndex: children.length - index }}
+            transform: `translateX(${index * 0.3}rem)`,
+            zIndex: children.length - index,
+          }}
         >
           {child}
         </div>

src/frontend/src/pages/StorePage/components/market-card.tsx

@@ -167,10 +167,15 @@ export const MarketCardComponent = ({ data }: { data: storeComponent }) => {
                 }
               >
                 <div>
-                  {data.tags.length > 0 ? (
+                  {testTags.length > 0 ? (
                     <ElementStack>
-                      {data.tags.map((tag, index) => (
+                      {testTags.map((tag, index) => (
-                        <Badge key={index} size="md" variant="outline">
+                        <Badge
+                          key={index}
+                          size="md"
+                          className="bg-card"
+                          variant="outline"
+                        >
                           {"tag"}
                         </Badge>
                       ))}