:root {
    --rounded: 2.1875rem;
}

@media (max-width: 46.4375rem) {
    :root {
        --rounded: 1.25rem;
    }
}

.lead {
    color: var(--color-text-white);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.44;
    margin-top: 1.75rem;
    text-align: center;
}

.lead .inline-block {
    display: inline-block;
}

.memberList {
    display: grid;
    gap: 3.25rem 2rem;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    margin-top: 4.125rem;
}

.memberList__item {
    background-color: var(--bgc-white);
    border-radius: var(--rounded);
    display: grid;
    gap: 0;
    grid-row: span 3;
    grid-template-rows: subgrid;
    max-width: 21.875rem;
    width: 100%;
}

.member__link {
    border-radius: var(--rounded);
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.member__link:focus-visible {
    outline-offset: -0.0625rem;
    outline-width: 0.25rem;
}

.member__image {
    overflow: hidden;
    position: relative;
}

.member__image img {
    border-top-left-radius: var(--rounded);
    border-top-right-radius: var(--rounded);
    height: 100%;
    max-height: 15.75rem;
    transition: transform 0.3s ease-in-out;
    width: 100%;
}

.member__link:hover .member__image img {
    transform: scale(1.1);
}

.member__head {
    display: grid;
    gap: 0.0625rem;
    padding-inline: 1rem;
    padding-top: 1.375rem;
    position: relative;
    text-align: center;
}

.member__body {
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    padding-bottom: 1.125rem;
    padding-inline: 1rem;
}

.member__label {
    border-radius: 0.5rem;
    color: var(--color-text-white);
    display: grid;
    font-family: var(--font-noto-sans);
    font-size: 0.875rem;
    font-weight: 700;
    height: 1.5625rem;
    left: 50%;
    letter-spacing: 0.04em;
    line-height: 1.43;
    max-width: 9.5625rem;
    place-items: center;
    position: absolute;
    top: -0.8rem;
    transform: translateX(-50%);
    width: 100%;
}

.member__affiliation {
    align-self: center;
    font-family: var(--font-noto-sans);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.47;
    padding-bottom: 0.5rem;
}

.member__position,
.member__joining,
.member__department {
    font-family: var(--font-noto-sans);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.21;
    text-align: center;
}

.member__name {
    font-size: 1.3125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.19;
    margin-top: 0.125rem;
}

:where(.member__label) {
    background-color: var(--color-primary-dark);
}

.member__label[data-label="fiber"] {
    background-color: var(--color-fiber);
}

.member__label[data-label="machine"] {
    background-color: var(--color-machine);
}

.member__label[data-label="metal"] {
    background-color: var(--color-metal);
}

.member__label[data-label="energy"] {
    background-color: var(--color-energy);
}

.member__label[data-label="food"] {
    background-color: var(--color-food);
}

.member__label[data-label="housing-life"] {
    background-color: var(--color-housing-life);
}

.member__label[data-label="info-finance"] {
    background-color: var(--color-info-finance);
}

.member__label[data-label="head-office"] {
    background-color: var(--color-head-office);
}

.member__label[data-label="8th-company"] {
    background-color: var(--color-8th-company);
}

@media (max-width: 72.4375rem) {
    .container {
        padding-inline: 1.375rem;
        width: 100%;
    }

    .memberList {
        gap: 1.25rem 1.5rem;
        grid-template-columns: repeat(2, 1fr);
        margin-inline: auto;
        margin-top: 3rem;
        max-width: 50rem;
    }

    .memberList__item {
        max-width: 100%;
    }
}

@media (max-width: 46.4375rem) {
    .lead {
        font-size: 1.0625rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.7;
        margin-top: 1.25rem;
        text-align: left;
    }

    .lead .inline-block {
        display: inline;
    }

    .memberList {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 2.5rem;
        max-width: 25rem;
    }
}