/* Responsive additions for the team page. Loaded after team.css. */

@media (max-width: 1180px) {
    .team-roster > ul:first-of-type {
        gap: 20px;
    }

    .team-roster > ul:first-of-type > li {
        min-height: 132px;
        padding: 24px 28px;
    }

    .team-roster > ul:first-of-type > li:first-child {
        padding-right: clamp(164px, 17vw, 206px);
    }

    .team-roster > ul:first-of-type > li:first-child::after {
        width: clamp(140px, 14.5vw, 176px);
    }
}

@media (max-width: 820px) {
    .team-page__art {
        height: clamp(700px, 105svh, 900px);
    }

    .team-roster > ul:first-of-type {
        max-width: 720px;
    }

    .team-roster > ul:first-of-type > li {
        min-height: 124px;
    }
}

@media (max-width: 600px) {
    .team-page {
        padding-bottom: 56px;
    }

    .team-roster {
        margin-top: 0;
    }

    .team-roster > :not(ul:first-of-type) {
        font-size: 16px;
        line-height: 1.5;
    }

    .team-roster > ul:first-of-type > li {
        min-height: 112px;
        padding: 20px;
        border-radius: 16px;
        font-size: 16px;
        line-height: 1.35;
    }

    .team-roster > ul:first-of-type > li strong {
        margin-top: 4px;
        font-size: clamp(19px, 5.6vw, 23px);
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .team-roster > ul:first-of-type > li:first-child {
        min-height: 152px;
        padding-right: 126px;
    }

    .team-roster > ul:first-of-type > li:first-child::after {
        width: 108px;
        border-radius: 0 16px 16px 0;
    }
}

@media (max-width: 380px) {
    .team-roster > ul:first-of-type > li {
        padding: 18px;
    }

    .team-roster > ul:first-of-type > li:first-child {
        min-height: 148px;
        padding-right: 108px;
    }

    .team-roster > ul:first-of-type > li:first-child::after {
        width: 92px;
    }
}