style: update mobile style

src/components/BU/About/BUAbout.tsx

@@ -24,6 +24,10 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0 16px;
+
+  p {
+    padding-top: 24px;
+  }
 `
 
 export default BUAbout

src/components/BU/BUHero.tsx

@@ -287,7 +287,7 @@ const Content = styled.div`
     }
 
     table {
-      margin-bottom: 16px;
+      margin-bottom: 0;
     }
 
     table th,
@@ -298,7 +298,7 @@ const Content = styled.div`
   }
 
   @media (max-width: ${breakpoints.md}px) {
-    padding-bottom: 16px;
+    padding-bottom: 80px;
 
     button {
       width: 100%;

src/components/BU/BUMenus.tsx

@@ -20,6 +20,8 @@ const Container = styled.div`
   }
 
   @media (max-width: ${breakpoints.md}px) {
+    margin-bottom: 18px;
+
     > div {
       margin-bottom: 80px;
     }

src/components/BU/BUSection.tsx

@@ -25,7 +25,6 @@ const Container = styled.div`
   box-sizing: border-box;
 
   @media (max-width: ${breakpoints.md}px) {
-    margin-top: 60px;
     flex-direction: column;
   }
 `
@@ -66,6 +65,7 @@ const TitleContainer = styled.div`
 
   @media (max-width: ${breakpoints.md}px) {
     border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+    padding-top: 0;
   }
 `
 

src/components/BU/Media/BUMedia.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import BUSection from '../BUSection'
 
@@ -62,12 +63,32 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    & > div > div {
+      border-bottom: 0;
+      margin-bottom: 8px;
+    }
+
+    & > div > div:nth-of-type(2) {
+      padding-bottom: 24px;
+    }
+
+    h3 {
+      font-size: 22px;
+      line-height: 122%;
+    }
+  }
 `
 
 const GridContainer = styled.div`
   margin-top: 140px;
   padding-top: 40px;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
+
+  @media (max-width: ${breakpoints.md}px) {
+    margin-top: 0;
+  }
 `
 
 const Section = styled.section`

src/components/BU/Milestones/BUMilestones.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import BUSection from '../BUSection'
 
@@ -51,6 +52,11 @@ const ScrollableContainer = styled.div`
   &::-webkit-scrollbar {
     display: none;
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 100vw;
+    margin-top: 8px;
+  }
 `
 
 const Item = styled.div`
@@ -64,6 +70,10 @@ const Item = styled.div`
       display: none;
     }
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    gap: 16px;
+  }
 `
 
 const GreyBox = styled.div`
@@ -85,6 +95,12 @@ const GreyBox = styled.div`
     text-transform: capitalize;
     margin-bottom: 0;
   }
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 216px;
+    height: 284px;
+    padding: 16px 40px 16px 16px;
+  }
 `
 
 const Year = styled.div`
@@ -109,6 +125,10 @@ const Bar = styled.hr`
   height: 1px;
   z-index: 0;
   left: 30px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    width: 260px;
+  }
 `
 
 const Step = styled.span`

src/components/BU/Team/BUTeam.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import BUSection from '../BUSection'
 import ProfileCard from './ProfileCard'
@@ -73,18 +74,43 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    & > div > div {
+      border-bottom: 0;
+    }
+
+    & > div > div:nth-of-type(2) {
+      padding-bottom: 24px;
+    }
+
+    h3 {
+      margin-top: 8px;
+      font-size: 22px;
+      line-height: 122%;
+    }
+  }
 `
 
 const GridContainer = styled.div`
   margin-top: 140px;
   padding-top: 40px;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
+
+  @media (max-width: ${breakpoints.md}px) {
+    margin-top: 0;
+  }
 `
 
 const Section = styled.section`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(222px, 1fr));
   gap: 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
 `
 
 export default BUTeam

src/components/BU/Team/ProfileCard.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 
 type Props = {
@@ -17,12 +18,17 @@ const ProfileCard = ({ name, position, imageUrl }: Props) => (
 const Card = styled.div`
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
 `
 
 const ProfileImage = styled.img`
   width: auto;
   height: auto;
   margin-bottom: 16px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    margin-bottom: 8px;
+  }
 `
 
 const Name = styled.p`
@@ -31,6 +37,12 @@ const Name = styled.p`
   line-height: 26px;
   text-transform: capitalize;
   margin-bottom: 8px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 14px;
+    line-height: 130%;
+    margin-bottom: 4px;
+  }
 `
 
 const Position = styled.p`
@@ -39,6 +51,11 @@ const Position = styled.p`
   line-height: 22px;
   text-transform: capitalize;
   opacity: 0.5;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 12px;
+    line-height: 130%;
+  }
 `
 
 export default ProfileCard

src/components/BU/Testimonials/BUTestimonials.tsx

@@ -59,9 +59,11 @@ const ItemContainer = styled.div`
 
 const Item = styled.section`
   flex-shrink: 0;
+  box-sizing: border-box;
 
   @media (max-width: ${breakpoints.md}px) {
     width: 216px;
+    height: 370px;
   }
 `
 
@@ -83,23 +85,29 @@ const Icon = styled.div`
 `
 
 const Paragraph = styled.p`
-  font-family: Helvetica;
   font-size: 16px;
-  font-style: normal;
   font-weight: 400;
   line-height: 24px;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 14px;
+    line-height: 126%;
+  }
 `
 
 const Title = styled.h2`
-  font-family: Helvetica;
   font-size: 36px;
-  font-style: normal;
   font-weight: 400;
   line-height: 42px;
   padding-top: 24px;
   width: 100%;
   border-top: 1px solid rgba(0, 0, 0, 0.18);
   margin-top: auto;
+
+  @media (max-width: ${breakpoints.md}px) {
+    font-size: 22px;
+    padding-top: 16px;
+  }
 `
 
 const FlexContainer = styled.div`
@@ -112,7 +120,8 @@ const FlexContainer = styled.div`
   align-self: stretch;
 
   @media (max-width: ${breakpoints.md}px) {
-    height: 358px;
+    padding-top: 16px;
+    height: 282px;
   }
 `
 

src/components/Challenges/ChallengeList.tsx

@@ -116,7 +116,7 @@ const NoChallenges = styled.p`
 
 const CustomBox = styled(Box)`
   @media (max-width: ${breakpoints.md}px) {
-    margin-bottom: 195px;
+    margin-bottom: 80px;
   }
 `
 

src/components/Jobs/JobItem.tsx

@@ -56,6 +56,7 @@ const JobHeader = styled.div`
 
   @media (max-width: ${breakpoints.md}px) {
     margin-bottom: 24px;
+    gap: 8px;
   }
 `