wrap partners section with container & add title

views/HomePage/Partners.tsx

@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import NextImage from 'next/image'
 import SwiperCore, { Autoplay } from 'swiper'
 import { Swiper, SwiperSlide } from 'swiper/react'
+import { Container } from 'components/Container'
+import { media } from 'utils/media'
 
 SwiperCore.use([Autoplay])
 
@@ -16,17 +18,21 @@ const PARTNER_LOGOS = [
   'logoipsum-logo-7.svg',
 ]
 
-const LOGOS_PER_VIEW = 6
-
 export default function Partners() {
   return (
     <PartnersWrapper>
+      <Title>official partners with</Title>
       <Swiper
-        slidesPerView={LOGOS_PER_VIEW}
-        spaceBetween={0}
+        slidesPerView={6}
+        spaceBetween={30}
         loop={true}
         autoplay={{ delay: 0, disableOnInteraction: false, pauseOnMouseEnter: false, waitForTransition: false, stopOnLastSlide: false }}
         speed={3000}
+        breakpoints={{
+          320: { slidesPerView: 2 },
+          768: { slidesPerView: 4 },
+          1025: { slidesPerView: 6 },
+        }}
         className="swiper-wrapper"
       >
         {PARTNER_LOGOS.map((logo) => (
@@ -39,10 +45,25 @@ export default function Partners() {
   )
 }
 
-const PartnersWrapper = styled.div`
+const Title = styled.h3`
+  font-size: 1.3rem;
+  letter-spacing: 0.02em;
+  line-height: 0;
+  text-transform: uppercase;
+  margin-bottom: 2rem;
+  text-align: center;
+  opacity: 0.8;
+
+  ${media('<=desktop')} {
+    line-height: 1.5;
+  }
+`
+
+const PartnersWrapper = styled(Container)`
   .swiper-wrapper {
     will-change: transform;
     transition-timing-function: linear;
+    margin-top: 0.5rem;
   }
 
   .swiper-slide {