#bio {

    display: flex;

    align-items: center;

    gap: 2rem;
}

.bio-pic-container {

    flex: 0 0 250px;
}

.bio-pic {

    width: 100%;

    border-radius: 50%;

    border:
        3px solid
        var(--accent);

    transition:
        transform var(--transition);
}

.bio-pic:hover {

    transform:
        scale(1.03);
}

.bio-text {

    flex: 1;
}

.team-member {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 2rem;
}

.team-member img {

    width: 150px;
    height: 150px;

    object-fit: cover;

    border-radius: 50%;
}

.contact-details {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px,1fr)
        );

    gap: 1rem;
}

.contact-item {

    background:
        var(--bg-alt);

    padding: 1.5rem;

    border-radius:
        var(--radius);
}

.values ul {

    list-style: none;
}

.values li {

    margin-bottom: .75rem;
}

@media (max-width:768px) {

    #bio,
    .team-member {

        flex-direction: column;

        text-align: center;
    }

    .bio-pic-container {

        width: 200px;

        flex: none;
    }

}