feat: responsive design for 1440px breakpoint

src/components/Badge/Badge.tsx

@@ -16,6 +16,11 @@ export const Badge = styled.div`
   border-radius: 999px;
   border: 1px solid rgba(0, 0, 0, 0.18);
 
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 9px;
+    padding: 3px 7.5px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     font-size: 12px;
     padding: 4px 8px;

src/components/Footer/HomeFooter.tsx

@@ -76,6 +76,14 @@ const Container = styled.footer`
     line-height: 42px;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    h2 {
+      font-size: 27px;
+      line-height: 32px;
+      padding-block: 18px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     width: 100%;
     margin-top: 74px;
@@ -127,9 +135,28 @@ const Description = styled.div`
     background-color: transparent;
     border: 1px solid #fff;
     color: #fff;
+    box-sizing: border-box;
     cursor: pointer;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-top: 24px;
+    margin-bottom: 48px;
+    gap: 30px;
+
+    p {
+      font-size: 27px;
+      line-height: 32px;
+    }
+
+    button {
+      width: 95px;
+      font-size: 11px;
+      line-height: 15px;
+      padding: 8px 16px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     width: 100%;
     margin-top: 8px;
@@ -149,7 +176,7 @@ const Links = styled.div`
   padding-bottom: 64px;
   border-top: 1px solid rgba(255, 255, 255, 0.18);
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.xl}px) {
     padding-bottom: 48px;
   }
 `
@@ -172,6 +199,18 @@ const LinksColumn = styled.div`
     color: white;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    h3 {
+      font-size: 12px;
+      line-height: 15px;
+    }
+
+    a {
+      font-size: 12px;
+      line-height: 130%;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     h3 {
       font-size: 12px;
@@ -179,7 +218,7 @@ const LinksColumn = styled.div`
 
     a {
       font-size: 12px;
-      line-height: 130%;
+      line-height: 15px;
     }
   }
 `
@@ -199,6 +238,15 @@ const Bottom = styled.div`
     }
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-block: 15px;
+
+    p {
+      font-size: 12px;
+      line-height: 15px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     p {
       font-size: 12px;

src/components/Hero/Description.tsx

@@ -24,6 +24,15 @@ const Container = styled.div`
     line-height: 122%;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-block: 18px;
+    padding-block: 18px;
+    p {
+      font-size: 16px;
+      line-height: 122%;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     p {
       font-size: 14px;

src/components/Hero/Hero.tsx

@@ -37,6 +37,28 @@ const Container = styled.div`
 
   margin-bottom: 165px;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    h1,
+    h2 {
+      font-size: 27px;
+      line-height: 32px;
+    }
+
+    h2 {
+      margin-bottom: 24px;
+    }
+
+    button {
+      width: 110px;
+      height: 32px;
+      font-size: 11px;
+      line-height: 15px;
+      padding: 8px 26px;
+    }
+
+    margin-bottom: 150px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     h1,
     h2 {

src/components/Mission/Mission.tsx

@@ -86,6 +86,21 @@ const Container = styled.div`
     padding: 20px 0 8px 0;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-top: 165px;
+    margin-bottom: 111px;
+
+    h2 {
+      font-size: 27px;
+      line-height: 32px;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 122%;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     h2 {
       font-size: 22px;
@@ -117,6 +132,11 @@ const Title = styled.h3`
   line-height: 130%;
   width: 100%;
   padding-block: 16px;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 27px;
+    line-height: 32px;
+  }
 `
 
 const Content = styled.div`

src/components/Portfolio/Portfolio.tsx

@@ -36,9 +36,20 @@ const Header = styled.div`
     font-weight: 400;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-block: 18px;
+    margin-bottom: 42px;
+
+    sup {
+      font-size: 12px;
+      margin-left: 0px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     padding-block: 16px;
     margin-bottom: 48px;
+
     sup {
       font-size: 12px;
       margin-left: 0px;
@@ -52,6 +63,11 @@ const Title = styled.p`
   line-height: 130%;
   box-sizing: border-box;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 27px;
+    line-height: 32px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     font-size: 22px;
     line-height: 122%;

src/components/Portfolio/PortfolioItem.tsx

@@ -85,6 +85,26 @@ const Container = styled.div`
     padding: 20px 0 8px 0;
   }
 
+  @media (max-width: ${breakpoints.xl}px) {
+    table {
+      margin-bottom: 15px;
+    }
+
+    table th,
+    table tr {
+      font-size: 13px;
+      line-height: 18px;
+      padding: 15px 0 6px 0;
+    }
+
+    p {
+      font-size: 16px;
+      line-height: 122%;
+      margin-top: 30px;
+      margin-bottom: 24px;
+    }
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     p {
       font-size: 14px;
@@ -114,6 +134,10 @@ const Header = styled.div`
   padding-block: 24px;
   box-sizing: border-box;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-block: 18px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     padding-block: 16px;
   }
@@ -140,8 +164,9 @@ const TitleText = styled.h3`
   font-size: 22px;
   line-height: 26px;
 
-  @media (max-width: ${breakpoints.md}px) {
+  @media (max-width: ${breakpoints.xl}px) {
     font-size: 16px;
+    line-height: 20px;
   }
 `
 
@@ -149,6 +174,10 @@ const Content = styled.div`
   width: 100%;
   padding-bottom: 40px;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    padding-bottom: 30px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     padding-bottom: 16px;
 
@@ -162,6 +191,11 @@ const ToggleButtonImage = styled.img`
   width: 48px;
   height: 48px;
 
+  @media (max-width: ${breakpoints.xl}px) {
+    width: 36px;
+    height: 36px;
+  }
+
   @media (max-width: ${breakpoints.md}px) {
     width: 18px;
     height: 18px;

src/components/Team/Member.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Image from 'next/image'
 
@@ -27,6 +28,11 @@ const Container = styled.div`
     font-size: 22px;
     font-weight: 400;
     line-height: 130%;
+
+    @media (max-width: ${breakpoints.xl}px) {
+      font-size: 16px;
+      line-height: 20px;
+    }
   }
 
   p {
@@ -35,6 +41,11 @@ const Container = styled.div`
     font-weight: 400;
     text-transform: capitalize;
     opacity: 0.5;
+
+    @media (max-width: ${breakpoints.xl}px) {
+      font-size: 13px;
+      line-height: 18px;
+    }
   }
 `
 
@@ -43,6 +54,10 @@ const ImageContainer = styled.div`
   width: 100%;
   margin-bottom: 16px;
   aspect-ratio: 1;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    margin-bottom: 12px;
+  }
 `
 
 const MemberImage = styled(Image)`

src/components/Team/Team.tsx

@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import React from 'react'
 
@@ -24,12 +25,22 @@ const Title = styled.p`
   font-weight: 400;
   line-height: 130%;
   padding-block: 20px;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    font-size: 16px;
+    line-height: 20px;
+    padding-block: 18px;
+  }
 `
 
 const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
+
+  @media (max-width: ${breakpoints.xl}px) {
+    gap: 12px;
+  }
 `
 
 export default Team

src/pages/index.mdx

@@ -20,7 +20,7 @@ import BU_DATA from '../data/bu-data'
         <Button color="black" width="150px" height="40px" padding="10px 34px">Learn more</Button>
 
         <Description>
-            A mission-driven tech startup studio. We take ideas from the drawing board to market with financial, technical, legal, people operations, and brand-building support at every step. Our startups are free to focus on what they do best — building public goods to safeguard civil liberties in the digital age.
+            A mission-driven tech startup studio. We take ideas from the drawing board to market with financial, technical, legal, people operations, and brand-building support at every step. <br/><br/> Our startups are free to focus on what they do best — building public goods to safeguard civil liberties in the digital age.
         </Description>
     </Hero>