From b075f58269852a69b4991b59c8260b76a7d1f104 Mon Sep 17 00:00:00 2001
From: ani-kalpachka <ani_kalpacka888@gmail.com>
Date: Sat, 16 Mar 2024 19:14:53 +0200
Subject: [PATCH] Update Partners page styles

---
 .../admin/partners/Partners.styled.tsx        |  2 +-
 .../admin/partners/PartnersContent.tsx        | 52 ++++++++++++-------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/admin/partners/Partners.styled.tsx b/src/components/admin/partners/Partners.styled.tsx
index ac98e5e30..7e8be3b35 100644
--- a/src/components/admin/partners/Partners.styled.tsx
+++ b/src/components/admin/partners/Partners.styled.tsx
@@ -8,7 +8,7 @@ import theme from '../../../common/theme'
 export const SectionTitle = styled(Typography)(() => ({
   fontSize: theme.typography.pxToRem(24),
   textAlign: 'center',
-  paddingBottom: theme.spacing(11.5),
+  paddingBottom: theme.spacing(5),
 }))
 
 export const StyledGrid = styled(Grid)(() => ({
diff --git a/src/components/admin/partners/PartnersContent.tsx b/src/components/admin/partners/PartnersContent.tsx
index ba284bdab..1125f8db8 100644
--- a/src/components/admin/partners/PartnersContent.tsx
+++ b/src/components/admin/partners/PartnersContent.tsx
@@ -7,6 +7,7 @@ import useMobile from '../../../common/hooks/useMobile'
 import { organizations, partners, mainPartners } from './helpers/partnersData'
 import { SectionTitle, StyledGrid } from './Partners.styled'
 import PartnersSlider from './PartnersSlider'
+import theme from 'common/theme'
 
 const PartnersContent = () => {
   const LOGO_WIDTH = 181
@@ -18,9 +19,9 @@ const PartnersContent = () => {
   return (
     <>
       <Container maxWidth="lg">
-        <Grid container alignItems={'center'}>
+        <Grid container sx={{ display: 'flex', justifyContent: 'center' }}>
           {partners.map((partner) => (
-            <StyledGrid item xs={12} md={4} paddingTop={8} key={partner.name}>
+            <StyledGrid item xs={12} md={4} paddingTop={8} paddingBottom={5} key={partner.name}>
               <SectionTitle>{t(partner.title)}</SectionTitle>
               <ExternalLink href={partner.website}>
                 <Image
@@ -40,23 +41,36 @@ const PartnersContent = () => {
                 <SectionTitle>{t(el.title)}</SectionTitle>
               </Grid>
 
-              {el.items.map((partner, index) => (
-                <StyledGrid
-                  key={partner}
-                  item
-                  xs={12}
-                  md={4}
-                  paddingTop={index > 0 && mobile ? 4 : 0}>
-                  <ExternalLink href={el.websites[index]}>
-                    <Image
-                      alt="logo"
-                      src={`/img/partners/${partner}.svg`}
-                      width={LOGO_WIDTH}
-                      height={LOGO_HEIGHT}
-                    />
-                  </ExternalLink>
-                </StyledGrid>
-              ))}
+              <Grid
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: theme.spacing(2),
+                  paddingBottom: theme.spacing(5),
+
+                  [theme.breakpoints.up('md')]: {
+                    justifyContent: 'space-between',
+                    flexDirection: 'row',
+                    gap: theme.spacing(6),
+                  },
+
+                  [theme.breakpoints.up('lg')]: {
+                    gap: theme.spacing(12),
+                  },
+                }}>
+                {el.items.map((partner, index) => (
+                  <StyledGrid key={partner} item xs={12} paddingTop={index > 0 && mobile ? 4 : 0}>
+                    <ExternalLink href={el.websites[index]}>
+                      <Image
+                        alt="logo"
+                        src={`/img/partners/${partner}.svg`}
+                        width={LOGO_WIDTH}
+                        height={LOGO_HEIGHT}
+                      />
+                    </ExternalLink>
+                  </StyledGrid>
+                ))}
+              </Grid>
             </Fragment>
           ))}
         </Grid>