update section display(grid)

swlab-main/src/App.jsx

@@ -11,7 +11,7 @@ function App () {
     <>
       <Header />
       <Banner />
-      <Section title='Products' gap='3rem'>
+      <Section title='Products' gap='3rem' display='grid'>
         <Card
           title='BXM'
           subTitle='Business eXcellence Framework'

swlab-main/src/components/Card.jsx

@@ -34,9 +34,10 @@ export default function Card (props) {
 
 const Scene = styled.div`
   position: 'relative';
-  width: 400px;
-  height: 460px;
-  margin: 40px 0;
+  /* width: 400px; */
+  width: 100%;
+  height: 450px;
+  margin-top: 40px;
   perspective: 1200px;
 `
 const FlipCard = styled.article`
@@ -48,7 +49,7 @@ const FlipCard = styled.article`
   position: relative;
 
   ${Scene}:hover & {
-    transform: scale(1.1) rotateY(180deg);
+    transform: rotateY(180deg);
   }
 `
 const CardFace = styled.article`

swlab-main/src/components/Section.jsx

@@ -2,30 +2,39 @@
 import styled from 'styled-components'
 
 export default function Section (props) {
-  const { gap, title } = props
+  const { gap, title, display = 'flex' } = props
 
   return <Wrapper>
     <Title>{title}</Title>
-    <Contents gap={gap}>
-      {props.children}
-    </Contents>
+    {
+      display === 'flex'
+        ? <FlexContents gap={gap}>
+          {props.children}
+        </FlexContents>
+        : <GridContents gap={gap}>
+          {props.children}
+        </GridContents>
+    }
   </Wrapper>
 }
 
 const Wrapper = styled.section`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 80px 0;
+    padding: 80px;
 `
 const Title = styled.h1`
-  font-size: 4rem;
+  text-align: center;
+  font-size: 3rem;
   font-weight: 700;
 `
-const Contents = styled.div`
+const FlexContents = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
     gap: ${props => props.gap};
+    flex-wrap: wrap;
+`
+const GridContents = styled.div`
+display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: ${props => props.gap};
 `