improve spacings

components/product/ProductCard/ProductCard.module.css

@@ -97,13 +97,13 @@
 }
 
 .productTitle {
-  @apply pt-4 leading-8;
+  @apply pt-2 max-w-full;
   width: 400px;
   font-size: 2rem;
   letter-spacing: 0.4px;
 
   & span {
-    @apply inline p-4 bg-primary text-primary font-bold;
+    @apply inline py-4 px-6 bg-primary text-primary font-bold;
     font-size: inherit;
     letter-spacing: inherit;
     box-decoration-break: clone;
@@ -112,7 +112,7 @@
 }
 
 .productPrice {
-  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-6 bg-primary text-base font-semibold inline-block text-sm leading-6;
   letter-spacing: 0.4px;
 }
 

components/product/ProductCard/ProductCard.tsx

@@ -52,7 +52,7 @@ const ProductCard: FC<Props> = ({
       >
         <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-20 absolute">
-          <div className="absolute top-0 left-0">
+          <div className="absolute top-0 left-0 pr-16 max-w-full">
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
             </h3>

components/product/ProductView/ProductView.module.css

@@ -8,15 +8,15 @@
 
 .productDisplay {
   @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
-  margin-right: -2rem;
+  min-height: 600px;
-  margin-left: -2rem;
-  min-height: 400px;
 
   @screen md {
     min-height: 700px;
   }
 
   @screen lg {
+    margin-right: -2rem;
+    margin-left: -2rem;
     @apply mx-0 col-span-6;
     min-height: 100%;
     height: 100%;
@@ -28,7 +28,11 @@
 }
 
 .nameBox {
-  @apply absolute top-6 left-6 z-20;
+  @apply absolute top-6 left-0 z-20 pr-16;
+
+  @screen lg {
+    @apply left-6 pr-16;
+  }
 
   & .name {
     @apply px-6 py-2 bg-primary text-primary font-bold;
@@ -49,10 +53,10 @@
 }
 
 .sidebar {
-  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-12 w-full;
+  @apply flex flex-col col-span-1 mx-auto max-w-8xl px-6 w-full;
 
   @screen lg {
-    @apply col-span-5 pl-12 pt-20;
+    @apply col-span-6 pt-20;
   }
 }
 

components/ui/Container/Container.tsx

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

pages/index.tsx

@@ -119,7 +119,7 @@ export default function Home({
           />
         ))}
       </Marquee>
-      <div className="py-12 flex flex-row w-full px-12">
+      <div className="py-12 flex flex-row w-full px-6">
         <div className="pr-3 w-48 relative">
           <div className="sticky top-32">
             <ul className="mb-10">