Styling updates

components/product/ProductCard/ProductCard.module.css

@@ -100,3 +100,7 @@
 .slim {
   @apply bg-transparent relative overflow-hidden box-border;
 }
+
+.slim .tag {
+  @apply bg-secondary text-secondary inline-block p-3 font-bold text-xl break-words;
+}

components/product/ProductCard/ProductCard.tsx

@@ -35,9 +35,7 @@ const ProductCard: FC<Props> = ({
       {variant === 'slim' && (
         <>
           <div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
-            <span className="bg-accent-0 text-accent-9 inline-block p-3 font-bold text-xl break-words">
+            <span className={s.tag}>{product.name}</span>
-              {product.name}
-            </span>
           </div>
           {product?.images && (
             <Image

components/ui/Marquee/Marquee.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames'
 import s from './Marquee.module.css'
-import { FC, ReactNode, Component } from 'react'
+import { FC, ReactNode, Component, Children, isValidElement } from 'react'
 import Ticker from 'react-ticker'
 
 interface MarqueeProps {
@@ -26,7 +26,22 @@ const Marquee: FC<MarqueeProps> = ({
   return (
     <div className={rootClassName}>
       <Ticker offset={80}>
-        {() => <div className={s.container}>{children}</div>}
+        {() => (
+          <div className={s.container}>
+            {Children.map(children, (child) => {
+              if (isValidElement(child)) {
+                return {
+                  ...child,
+                  props: {
+                    ...child.props,
+                    className: cn(child.props.className, `${variant}`),
+                  },
+                }
+              }
+              return child
+            })}
+          </div>
+        )}
       </Ticker>
     </div>
   )