From e64701e2f7d3c0e8ccbba553e021962cd2f05aeb Mon Sep 17 00:00:00 2001
From: stevending1st <stevending1st@163.com>
Date: Wed, 17 Apr 2024 17:03:28 +0800
Subject: [PATCH 1/3] fix(theme-default): Support centering members in
 VPTeamPage

---
 .../components/VPTeamMembers.vue              | 82 +++++++++++++++----
 1 file changed, 67 insertions(+), 15 deletions(-)

diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue
index 5cb2c534f5d1..71b167ace91d 100644
--- a/src/client/theme-default/components/VPTeamMembers.vue
+++ b/src/client/theme-default/components/VPTeamMembers.vue
@@ -26,18 +26,66 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
 </template>
 
 <style scoped>
+.container {
+  display: grid;
+  gap: 24px;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1152px;
+}
+
+.VPTeamMembers.count-1 {
+  display: flex;
+  justify-content: center;
+}
+
+.VPTeamMembers.small.count-1 .container ,
+.VPTeamMembers.small.count-2 .container,
+.VPTeamMembers.small.count-3 .container,
+.VPTeamMembers.medium.count-1 .container,
+.VPTeamMembers.medium.count-2 .container {
+  display: flex;
+  justify-content: center;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
 .VPTeamMembers.small .container {
   grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
 }
 
-.VPTeamMembers.small.count-1 .container {
-  max-width: 276px;
+@media (max-width: 940px) {
+  .VPTeamMembers.small.count-3 .container {
+    flex-wrap: wrap;
+    justify-content: start;
+  }
 }
-.VPTeamMembers.small.count-2 .container {
-  max-width: calc(276px * 2 + 24px);
+
+@media (max-width: 640px) {
+  .VPTeamMembers.small.count-2 .container {
+    flex-wrap: wrap;
+  }
 }
-.VPTeamMembers.small.count-3 .container {
-  max-width: calc(276px * 3 + 24px * 2);
+
+.VPTeamMembers.small.count-1 .item,
+.VPTeamMembers.small.count-2 .item,
+.VPTeamMembers.small.count-3 .item {
+  width: 276px;
+}
+
+@media (max-width: 940px) and (min-width: 640px) {
+  .VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.small.count-3 .item {
+    width: calc(50% - 12px);
+  }
+}
+
+@media (max-width: 640px) {
+  .VPTeamMembers.small.count-1 .item,
+  .VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.small.count-3 .item {
+    width: 100% !important;
+  }
 }
 
 .VPTeamMembers.medium .container {
@@ -50,17 +98,21 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   }
 }
 
-.VPTeamMembers.medium.count-1 .container {
-  max-width: 368px;
+@media (max-width: 888px) {
+  .VPTeamMembers.medium.count-2 .container {
+    flex-wrap: wrap;
+  }
 }
-.VPTeamMembers.medium.count-2 .container {
-  max-width: calc(368px * 2 + 24px);
+
+.VPTeamMembers.medium.count-1 .item,
+.VPTeamMembers.medium.count-2 .item {
+  width: 368px;
 }
 
-.container {
-  display: grid;
-  gap: 24px;
-  margin: 0 auto;
-  max-width: 1152px;
+@media (max-width: 888px) {
+  .VPTeamMembers.medium.count-1 .item,
+  .VPTeamMembers.medium.count-2 .item {
+    width: 100% !important;
+  }
 }
 </style>

From 8b7d27ab078693a15d7c1f8c389c7b9879bad2eb Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Fri, 19 Apr 2024 09:33:49 +0900
Subject: [PATCH 2/3] go with more manual media query approach

---
 docs/team-test.md                             |  83 ++++++++++++++
 .../components/VPTeamMembers.vue              | 105 ++++++++----------
 .../theme-default/components/VPTeamPage.vue   |  43 +++----
 .../components/VPTeamPageSection.vue          |  19 +---
 .../components/VPTeamPageTitle.vue            |  13 ---
 .../styles/components/vp-doc.css              |  29 +++--
 6 files changed, 166 insertions(+), 126 deletions(-)
 create mode 100644 docs/team-test.md

diff --git a/docs/team-test.md b/docs/team-test.md
new file mode 100644
index 000000000000..e2254b1994e1
--- /dev/null
+++ b/docs/team-test.md
@@ -0,0 +1,83 @@
+---
+layout: page
+title: Meet the Team
+description: The development of Vite is guided by an international team.
+---
+
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers
+} from 'vitepress/theme'
+
+const members = [
+  {
+    avatar: 'https://github.com/yyx990803.png',
+    name: 'Evan You',
+    title: 'Creator',
+    links: [
+      { icon: 'github', link: 'https://github.com/yyx990803' },
+      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
+    ]
+  },
+  {
+    avatar: 'https://github.com/kiaking.png',
+    name: 'Kia King Ishii',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/kiaking' },
+      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+    ]
+  },
+  {
+    avatar: 'https://github.com/kiaking.png',
+    name: 'Kia King Ishii',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/kiaking' },
+      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+    ]
+  },
+  {
+    avatar: 'https://github.com/kiaking.png',
+    name: 'Kia King Ishii',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/kiaking' },
+      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+    ]
+  },
+  {
+    avatar: 'https://github.com/kiaking.png',
+    name: 'Kia King Ishii',
+    title: 'Developer',
+    links: [
+      { icon: 'github', link: 'https://github.com/kiaking' },
+      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+    ]
+  }
+]
+</script>
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Meet the Team</template>
+    <template #lead>
+      The development of Vite is guided by an international team, some of whom
+      have chosen to be featured below.
+    </template>
+  </VPTeamPageTitle>
+  <VPTeamMembers :members="members" />
+  <VPTeamPageSection>
+    <template #title>Team Emeriti</template>
+    <template #lead>
+      Here we honor some no-longer-active team members who have made valuable
+      contributions in the past.
+    </template>
+    <template #members>
+      <VPTeamMembers size="small" :members="members" />
+    </template>
+  </VPTeamPageSection>
+</VPTeamPage>
\ No newline at end of file
diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue
index 71b167ace91d..c9dac9f2a7e9 100644
--- a/src/client/theme-default/components/VPTeamMembers.vue
+++ b/src/client/theme-default/components/VPTeamMembers.vue
@@ -34,85 +34,76 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   max-width: 1152px;
 }
 
-.VPTeamMembers.count-1 {
-  display: flex;
-  justify-content: center;
+.item {
+  width: 100%;
 }
 
-.VPTeamMembers.small.count-1 .container ,
-.VPTeamMembers.small.count-2 .container,
-.VPTeamMembers.small.count-3 .container,
-.VPTeamMembers.medium.count-1 .container,
-.VPTeamMembers.medium.count-2 .container {
-  display: flex;
-  justify-content: center;
-  width: 100% !important;
-  max-width: 100% !important;
-}
+@media (min-width: 512px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-.VPTeamMembers.small .container {
-  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
-}
+  .VPTeamMembers.small.count-1 .container,
+  .VPTeamMembers.medium.count-1 .container {
+    display: flex;
+    justify-content: center;
+  }
 
-@media (max-width: 940px) {
-  .VPTeamMembers.small.count-3 .container {
-    flex-wrap: wrap;
-    justify-content: start;
+  .VPTeamMembers.small.count-1 .item {
+    max-width: 272px;
   }
-}
 
-@media (max-width: 640px) {
-  .VPTeamMembers.small.count-2 .container {
-    flex-wrap: wrap;
+  .VPTeamMembers.medium.count-1 .item {
+    max-width: 368px;
   }
 }
 
-.VPTeamMembers.small.count-1 .item,
-.VPTeamMembers.small.count-2 .item,
-.VPTeamMembers.small.count-3 .item {
-  width: 276px;
-}
+@media (min-width: 640px) {
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-@media (max-width: 940px) and (min-width: 640px) {
-  .VPTeamMembers.small.count-2 .item,
-  .VPTeamMembers.small.count-3 .item {
-    width: calc(50% - 12px);
+  .VPTeamMembers.medium.count-2 .container {
+    display: flex;
+    justify-content: center;
   }
-}
 
-@media (max-width: 640px) {
-  .VPTeamMembers.small.count-1 .item,
-  .VPTeamMembers.small.count-2 .item,
-  .VPTeamMembers.small.count-3 .item {
-    width: 100% !important;
+  .VPTeamMembers.medium.count-2 .item {
+    max-width: 368px;
   }
 }
 
-.VPTeamMembers.medium .container {
-  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
-}
+@media (min-width: 768px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(3, 1fr);
+  }
 
-@media (min-width: 375px) {
-  .VPTeamMembers.medium .container {
-    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
+  .VPTeamMembers.small.count-2 .container {
+    display: flex;
+    justify-content: center;
   }
-}
 
-@media (max-width: 888px) {
-  .VPTeamMembers.medium.count-2 .container {
-    flex-wrap: wrap;
+  .VPTeamMembers.small.count-2 .item {
+    max-width: 272px;
   }
 }
 
-.VPTeamMembers.medium.count-1 .item,
-.VPTeamMembers.medium.count-2 .item {
-  width: 368px;
-}
+@media (min-width: 960px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(4, 1fr);
+  }
 
-@media (max-width: 888px) {
-  .VPTeamMembers.medium.count-1 .item,
-  .VPTeamMembers.medium.count-2 .item {
-    width: 100% !important;
+  .VPTeamMembers.small.count-3 .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .VPTeamMembers.small.count-3 .item {
+    max-width: 272px;
+  }
+
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 </style>
diff --git a/src/client/theme-default/components/VPTeamPage.vue b/src/client/theme-default/components/VPTeamPage.vue
index 71d9bdb51007..715e904f127d 100644
--- a/src/client/theme-default/components/VPTeamPage.vue
+++ b/src/client/theme-default/components/VPTeamPage.vue
@@ -6,53 +6,42 @@
 
 <style scoped>
 .VPTeamPage {
-  margin: 96px 0;
+  padding: 48px 24px 128px;
 }
 
 @media (min-width: 768px) {
   .VPTeamPage {
-    margin: 128px 0;
+    padding: 64px 32px 128px;
   }
 }
 
-.VPHome :slotted(.VPTeamPageTitle) {
-  border-top: 1px solid var(--vp-c-gutter);
-  padding-top: 88px !important;
+@media (min-width: 960px) {
+  .VPTeamPage {
+    padding: 96px 64px 128px;
+  }
 }
 
-:slotted(.VPTeamPageSection + .VPTeamPageSection),
-:slotted(.VPTeamMembers + .VPTeamPageSection) {
+.VPTeamPage :deep(.VPTeamPageSection + .VPTeamPageSection),
+.VPTeamPage :deep(.VPTeamMembers + .VPTeamPageSection) {
   margin-top: 64px;
 }
 
-:slotted(.VPTeamMembers + .VPTeamMembers) {
+.VPTeamPage :deep(.VPTeamPageTitle + .VPTeamMembers) {
+  margin-top: 32px;
+}
+
+.VPTeamPage :deep(.VPTeamMembers + .VPTeamMembers) {
   margin-top: 24px;
 }
 
 @media (min-width: 768px) {
-  :slotted(.VPTeamPageTitle + .VPTeamPageSection) {
+  .VPTeamPage :deep(.VPTeamPageTitle + .VPTeamPageSection) {
     margin-top: 16px;
   }
 
-  :slotted(.VPTeamPageSection + .VPTeamPageSection),
-  :slotted(.VPTeamMembers + .VPTeamPageSection) {
+  .VPTeamPage :deep(.VPTeamPageSection + .VPTeamPageSection),
+  .VPTeamPage :deep(.VPTeamMembers + .VPTeamPageSection) {
     margin-top: 96px;
   }
 }
-
-:slotted(.VPTeamMembers) {
-  padding: 0 24px;
-}
-
-@media (min-width: 768px) {
-  :slotted(.VPTeamMembers) {
-    padding: 0 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  :slotted(.VPTeamMembers) {
-    padding: 0 64px;
-  }
-}
 </style>
diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue
index 2bb52ab9aefe..d4b98489f97d 100644
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@@ -16,22 +16,6 @@
 </template>
 
 <style scoped>
-.VPTeamPageSection {
-  padding: 0 32px;
-}
-
-@media (min-width: 768px) {
-  .VPTeamPageSection {
-    padding: 0 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPTeamPageSection {
-    padding: 0 64px;
-  }
-}
-
 .title {
   position: relative;
   margin: 0 auto;
@@ -67,11 +51,10 @@
   text-align: center;
   line-height: 24px;
   font-size: 16px;
-  font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
 .members {
-  padding-top: 40px;
+  padding-top: 24px;
 }
 </style>
diff --git a/src/client/theme-default/components/VPTeamPageTitle.vue b/src/client/theme-default/components/VPTeamPageTitle.vue
index 9751a1886aa5..d0f49fdbb01f 100644
--- a/src/client/theme-default/components/VPTeamPageTitle.vue
+++ b/src/client/theme-default/components/VPTeamPageTitle.vue
@@ -11,22 +11,9 @@
 
 <style scoped>
 .VPTeamPageTitle {
-  padding: 48px 32px;
   text-align: center;
 }
 
-@media (min-width: 768px) {
-  .VPTeamPageTitle {
-    padding: 64px 48px 48px;
-  }
-}
-
-@media (min-width: 960px) {
-  .VPTeamPageTitle {
-    padding: 80px 64px 48px;
-  }
-}
-
 .title {
   letter-spacing: 0;
   line-height: 44px;
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 90afe60e590a..419b52408f3b 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -523,21 +523,28 @@
 
 .vp-doc .VPTeamMembers {
   margin-top: 24px;
+  margin-bottom: 24px;
 }
 
-.vp-doc .VPTeamMembers.small.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
-}
+@media (min-width: 768px) {
+  .vp-doc .VPTeamMembers.small .container,
+  .vp-doc .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
 
-.vp-doc .VPTeamMembers.small.count-2 .container,
-.vp-doc .VPTeamMembers.small.count-3 .container {
-  max-width: 100% !important;
-}
+  .vp-doc .VPTeamMembers.small.count-2 .container,
+  .vp-doc .VPTeamMembers.small.count-3 .container {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+  }
+
+  .vp-doc .VPTeamMembers.small .item {
+    max-width: 100% !important;
+  }
 
-.vp-doc .VPTeamMembers.medium.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 24px) / 2) !important;
+  .vp-doc .VPTeamMembers.small.count-1 .item {
+    max-width: 272px !important;
+  }
 }
 
 /**

From 8e84643019389ec1124bff0e811d8172341fca34 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Mon, 22 Apr 2024 19:51:39 +0900
Subject: [PATCH 3/3] fix fix fix

---
 docs/team-test.md                             | 66 ++++++++++++++++---
 .../components/VPTeamMembers.vue              | 60 ++++++++++-------
 .../styles/components/vp-doc.css              |  7 ++
 3 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/docs/team-test.md b/docs/team-test.md
index e2254b1994e1..6b8bfeba5811 100644
--- a/docs/team-test.md
+++ b/docs/team-test.md
@@ -12,7 +12,7 @@ import {
   VPTeamMembers
 } from 'vitepress/theme'
 
-const members = [
+const members1 = [
   {
     avatar: 'https://github.com/yyx990803.png',
     name: 'Evan You',
@@ -31,13 +31,43 @@ const members = [
       { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
     ]
   },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // }
+]
+
+const members2 = [
   {
-    avatar: 'https://github.com/kiaking.png',
-    name: 'Kia King Ishii',
-    title: 'Developer',
+    avatar: 'https://github.com/yyx990803.png',
+    name: 'Evan You',
+    title: 'Creator',
     links: [
-      { icon: 'github', link: 'https://github.com/kiaking' },
-      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+      { icon: 'github', link: 'https://github.com/yyx990803' },
+      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
     ]
   },
   {
@@ -57,7 +87,25 @@ const members = [
       { icon: 'github', link: 'https://github.com/kiaking' },
       { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
     ]
-  }
+  },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // },
+  // {
+  //   avatar: 'https://github.com/kiaking.png',
+  //   name: 'Kia King Ishii',
+  //   title: 'Developer',
+  //   links: [
+  //     { icon: 'github', link: 'https://github.com/kiaking' },
+  //     { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
+  //   ]
+  // }
 ]
 </script>
 
@@ -69,7 +117,7 @@ const members = [
       have chosen to be featured below.
     </template>
   </VPTeamPageTitle>
-  <VPTeamMembers :members="members" />
+  <VPTeamMembers :members="members1" />
   <VPTeamPageSection>
     <template #title>Team Emeriti</template>
     <template #lead>
@@ -77,7 +125,7 @@ const members = [
       contributions in the past.
     </template>
     <template #members>
-      <VPTeamMembers size="small" :members="members" />
+      <VPTeamMembers size="small" :members="members2" />
     </template>
   </VPTeamPageSection>
 </VPTeamPage>
\ No newline at end of file
diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue
index c9dac9f2a7e9..9c97a5389b09 100644
--- a/src/client/theme-default/components/VPTeamMembers.vue
+++ b/src/client/theme-default/components/VPTeamMembers.vue
@@ -38,70 +38,84 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   width: 100%;
 }
 
+/**
+ * Small size layout.
+ * -------------------------------------------------------------------------- */
+
 @media (min-width: 512px) {
   .VPTeamMembers.small .container {
     grid-template-columns: repeat(2, 1fr);
   }
 
   .VPTeamMembers.small.count-1 .container,
-  .VPTeamMembers.medium.count-1 .container {
+  .VPTeamMembers.small.count-2 .container {
     display: flex;
     justify-content: center;
   }
 
-  .VPTeamMembers.small.count-1 .item {
+  .VPTeamMembers.small.count-1 .item,
+  .VPTeamMembers.small.count-2 .item {
     max-width: 272px;
   }
+}
 
-  .VPTeamMembers.medium.count-1 .item {
-    max-width: 368px;
+@media (min-width: 768px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(3, 1fr);
   }
 }
 
-@media (min-width: 640px) {
-  .VPTeamMembers.medium .container {
-    grid-template-columns: repeat(2, 1fr);
+@media (min-width: 960px) {
+  .VPTeamMembers.small .container {
+    grid-template-columns: repeat(4, 1fr);
   }
 
-  .VPTeamMembers.medium.count-2 .container {
+  .VPTeamMembers.small.count-3 .container {
     display: flex;
     justify-content: center;
   }
 
-  .VPTeamMembers.medium.count-2 .item {
-    max-width: 368px;
+  .VPTeamMembers.small.count-3 .item {
+    max-width: 272px;
   }
 }
 
-@media (min-width: 768px) {
-  .VPTeamMembers.small .container {
-    grid-template-columns: repeat(3, 1fr);
-  }
+/**
+ * Medium size layout.
+ * -------------------------------------------------------------------------- */
 
-  .VPTeamMembers.small.count-2 .container {
+@media (min-width: 512px) and (max-width: 639px) {
+  .VPTeamMembers.medium .container {
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
   }
 
-  .VPTeamMembers.small.count-2 .item {
-    max-width: 272px;
+  .VPTeamMembers.medium .item {
+    max-width: 368px;
   }
 }
 
-@media (min-width: 960px) {
-  .VPTeamMembers.small .container {
-    grid-template-columns: repeat(4, 1fr);
+@media (min-width: 640px) {
+  .VPTeamMembers.medium .container {
+    grid-template-columns: repeat(2, 1fr);
   }
 
-  .VPTeamMembers.small.count-3 .container {
+  .VPTeamMembers.medium.count-1 .container,
+  .VPTeamMembers.medium.count-2 .container {
     display: flex;
     justify-content: center;
+    align-items: center;
   }
 
-  .VPTeamMembers.small.count-3 .item {
-    max-width: 272px;
+  .VPTeamMembers.medium.count-1 .item,
+  .VPTeamMembers.medium.count-2 .item {
+    max-width: 368px;
   }
+}
 
+@media (min-width: 960px) {
   .VPTeamMembers.medium .container {
     grid-template-columns: repeat(3, 1fr);
   }
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index 419b52408f3b..b13569763e45 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -526,6 +526,13 @@
   margin-bottom: 24px;
 }
 
+@media (min-width: 512px) {
+  .VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.small.count-3 .item {
+    max-width: 100% !important;
+  }
+}
+
 @media (min-width: 768px) {
   .vp-doc .VPTeamMembers.small .container,
   .vp-doc .VPTeamMembers.medium .container {