🎨 styles: border viewed product in product detail

:%s

pages/product/[slug].tsx

@@ -10,7 +10,7 @@ export default function Slug() {
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts />
     <ViewedProducts />
-    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
+    <RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also"/>
   </>
 }
 

src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss

@@ -3,9 +3,11 @@
 .listProductWithInfo {
     background-color: var(--background);
     border-top: 1rem solid var(--gray);
-    border-bottom: 1rem solid var(--gray);
     padding-top: 6rem;
     padding-bottom: 6rem;
+    &.borderBottom {
+        border-bottom: 1rem solid var(--gray);
+    }
     @screen lg {
         @apply flex spacing-horizontal-left;
         padding-top: 5.6rem;
@@ -17,7 +19,7 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            padding: 0 .8rem;
+            padding: 0 0.8rem;
             > div > div {
                 @apply shape-common-lg bg-white;
                 padding: 4rem 0;

src/components/common/ListProductWithInfo/ListProductWithInfo.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { TOptionsEvents } from 'keen-slider';
 import React from 'react';
 import CarouselCommon from '../CarouselCommon/CarouselCommon';
@@ -9,6 +10,7 @@ interface Props {
     data: ProductCardProps[],
     title: string,
     subtitle?: string,
+    hasBorderBottomMobile?: boolean,
 }
 const OPTION_DEFAULT: TOptionsEvents = {
     slidesPerView: 2,
@@ -35,9 +37,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
     },
 }
 
-const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
+const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
     return (
-        <div className={s.listProductWithInfo}>
+        <div className={classNames({
+            [s.listProductWithInfo]: true,
+            [s.borderBottom]: hasBorderBottomMobile,
+        })}>
             <InfoProducts
                 title={title}
                 subtitle={subtitle}

src/components/modules/product-detail/ViewedProducts/ViewedProducts.tsx

@@ -8,6 +8,7 @@ const ViewedProducts = () => {
             title="viewed Products"
             subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
             data={PRODUCT_DATA_TEST}
+            hasBorderBottomMobile={true}
         />
     );
 };