make secondary grid use gray bg, made sidemenu sticky

components/product/ProductCard/ProductCard.module.css

@@ -55,7 +55,7 @@
 }
 
 .squareBg,
-.productTitle,
+.productTitle > span,
 .productPrice,
 .wishlistButton {
   @apply transition ease-in-out duration-300;
@@ -65,9 +65,13 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
+.squareBg.gray {
+  @apply bg-gray-300 !important;
+}
+
 .productTitle {
-  line-height: 51px;
-  width: 200px;
+  line-height: 40px;
+  width: 18vw;
 
   & span {
     @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;

components/product/ProductCard/ProductCard.tsx

@@ -8,7 +8,7 @@ interface Props {
   className?: string
   children?: ReactNode[] | Component[] | any[]
   node: ProductData
-  variant?: 'slim'
+  variant?: 'slim' | 'simple'
 }
 
 interface ProductData {
@@ -44,12 +44,12 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
             src={p.images.edges[0].node.urlXL}
           />
         </div>
-        <div className={s.squareBg} />
+        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
           <div className="">
-            <div className={s.productTitle}>
+            <p className={s.productTitle}>
               <span>{p.name}</span>
-            </div>
+            </p>
             <span className={s.productPrice}>${p.prices.price.value}</span>
           </div>
           <div className={s.wishlistButton}>