|
|
|
@ -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>
|
|
|
|
|