Changes to the headings

components/product/ProductCard/ProductCard.module.css

@@ -69,19 +69,28 @@
   & .squareBg {
     @apply bg-gray-300 !important;
   }
+
+  & .productTitle {
+    width: 18vw;
+    margin-top: -7px;
+    font-size: 1rem;
+  }
+
+  & .productPrice {
+    @apply text-sm;
+  }
 }
 
 .productTitle {
   @apply pt-4 leading-8;
-  box-sizing: border-box;
+  width: 400px;
-  width: 17vw;
+  font-size: 2rem;
-  margin-top: -1.2rem;
+  letter-spacing: 0.4px;
 
   & span {
     @apply inline p-4 bg-primary text-primary font-bold;
     font-size: inherit;
-    line-height: inherit;
+    letter-spacing: inherit;
-    letter-spacing: 0.4px;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
   }
@@ -89,6 +98,7 @@
 
 .productPrice {
   @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  letter-spacing: 0.4px;
 }
 
 .wishlistButton {

components/ui/Container/Container.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className)
+  const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement

components/ui/Grid/Grid.module.css

@@ -23,7 +23,6 @@
   @apply gap-3;
 
   & > * {
-    font-size: 1.5rem;
     min-height: 325px;
   }
 }

pages/search.tsx

@@ -59,7 +59,7 @@ export default function Search({
 
   return (
     <Container>
-      <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+      <div className="grid grid-cols-12 gap-4 mt-3 mb-20">
         <div className="col-span-2">
           <ul className="mb-10">
             <li className="py-1 text-base font-bold tracking-wide">
@@ -143,6 +143,7 @@ export default function Search({
             <Grid layout="normal">
               {data.products.map(({ node }) => (
                 <ProductCard
+                  variant="simple"
                   key={node.path}
                   className="animate__animated animate__fadeIn"
                   product={node}