/* Team page: groups of member cards - the card itself uses the theme's .team-wrapper3 */

.team-page__intro {
    max-width: 820px;
    margin-bottom: 50px;
}

.team-page__group + .team-page__group {
    margin-top: 90px;
}

.team-page__head {
    margin-bottom: 40px;
}

.team-page__head .section-title {
    margin-bottom: 10px;
}

.team-page__team-intro {
    max-width: 820px;
    margin: 0;
}

.team-wrapper3 .image-area img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

.team-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 6;
    font-size: 72px;
    color: var(--primary-300, #66C2E6);
    background: var(--primary-50, #E6F5FB);
}

/* The theme only styles the name as a link; here it is plain text */
.team-wrapper3 .image-area .content-area {
    max-width: calc(100% - 40px);
}

.team-wrapper3 .image-area .content-area .text .title {
    color: var(--color-white);
    font-size: 24px;
    line-height: 1.2;
}

/* Name and role appear on hover; keep them visible for keyboard users and on touch screens */
.team-wrapper3:focus-within .image-area::after {
    bottom: 0;
}

.team-wrapper3:focus-within .image-area .content-area {
    opacity: 1;
    bottom: 30px;
}

@media (hover: none) {
    .team-wrapper3 .image-area::after {
        bottom: 0;
    }

    .team-wrapper3 .image-area .content-area {
        opacity: 1;
        bottom: 30px;
    }
}