Reordering

components/product/ProductCard/ProductCard.module.css

@@ -65,23 +65,30 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
-.squareBg.gray {
-  @apply bg-gray-300 !important;
+.simple {
+  & .squareBg {
+    @apply bg-gray-300 !important;
+  }
 }
 
 .productTitle {
-  line-height: 40px;
-  width: 18vw;
+  @apply pt-4 leading-8;
+  box-sizing: border-box;
+  width: 17vw;
+  margin-top: -1.2rem;
 
   & span {
-    @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
+    @apply inline p-4 bg-primary text-primary font-bold;
+    font-size: inherit;
+    line-height: inherit;
+    letter-spacing: 0.4px;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
   }
 }
 
 .productPrice {
-  @apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
 }
 
 .wishlistButton {

components/product/ProductCard/ProductCard.tsx

@@ -31,19 +31,21 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
 
   return (
     <Link href={`product${p.path}`}>
-      <a className={cn(s.root, className)}>
+      <a
+        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
+      >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>
-        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
+        <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="">
-            <p className={s.productTitle}>
+          <div className="absolute top-0 left-0">
+            <h3 className={s.productTitle}>
               <span>{p.name}</span>
-            </p>
+            </h3>
             <span className={s.productPrice}>${p.prices?.price.value}</span>
           </div>
           <div className={s.wishlistButton}>

components/ui/Grid/Grid.module.css

@@ -20,9 +20,10 @@
 }
 
 .layoutNormal {
-  @apply gap-6;
+  @apply gap-3;
 
   & > * {
+    font-size: 1.5rem;
     min-height: 325px;
   }
 }