.team-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: var(--nature2);
    border-radius: 32px;
    padding: 32px 28px;
    text-align: center;
    border-bottom: 5px solid var(--nature2);
    transition: 0.4s;
    & .team-img {
        border-radius: 24px;
        background: #F8FAFC;
    }
    & .team-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        & .name {
            font-size: 18px;
            font-family: var(--Medium);
        }
        & .post {
            font-size: clamp(14px, 2vw, 16px);
            color: var(--gray);
        }
    }
    & .teams-social {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        border-radius: 24px;
        background: white;
        width: max-content;
        padding: 8px;
        & a {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: var(--color1);
            transition: 0.4s;
            &:hover {
                color: var(--color2);
            }
        }
    }
    &:hover {
        border-color: var(--color1);
    }
}