Gonna look into this. Needs a bit adjustment.

I've updated a few things.

1. I went with more explicit media query approach on how we grid the layout. The .vp-doc part gets a bit more redundant but team member component style became simpler I guess.
2. Not related to this PR directly, but found out that <VPTeamPage> component margin top was broken (Vite website having issue, too much margin top) so I fixed it too. Also adjusted how we override these things (:slotted wasn't working as I expected).

@brc-dd
Could you test it 🙏 I've added https://localhost:5173/team-test page to test full team page. Should remove this file before merging.

@media (max-width: 640px)

@kiaking When there are more than 3 members on the page and the width is large, it is always displayed in two columns.

Oh no 😅 Thanks! I'll fix it.

OK, now I think I've fixed. I went and separated small and medium size styles completely since mixing them up was mixing up my brain 😅

OK, now I think I've fixed. I went and separated small and medium size styles completely since mixing them up was mixing up my brain 😅

Thank you! 😉 But there may be some problems:

1. When size is set to medium, the height is not equal

2. When the layout is home, size is small, but there are only two columns

Oh no... thank you for keep testing! I'll continue look into it. Yeah I wasn't testing in home layout too, but not sure why it makes any difference... 🤔

Oh no... thank you for keep testing! I'll continue look into it. Yeah I wasn't testing in home layout too, but not sure why it makes any difference... 🤔

Thanks for the commit. ❤️You don't have to say thank you to me, I filed an issue (#3769) and then fixed it, and it's my responsibility to do that too. Since I don't know any more details, thank you for taking the time to help me refine this PR. ❤️