Team Page

I am having trouble getting my team member page to be responsive and getting it to show the different team members in a 3 grid when a device is larger and single when it is smaller. I have tried a bunch of diffreent stuff to get it working and I have the desktop styled nicely but as soon as it goes to mobile I lose all of that and the picture is out way to big in mobile. I really could use some advice/help figuring out how to make this work. thanks in Advance.

This is the HTML I am using:

<div class="wrapper">
	  <h1>Our Team </h1>
  <div class="team">
    <div class="team_member">
      <div class="team_img">
		        <img src="Pic" />
      </div>
      <h3>Team Member Name</h3>
      <p class="role">Position in Company</p>
      <p> Team Member Info </p>
		</div>
		</div>

And this is the css:

@import url('https://fonts.googleapis.com/css?family=Allura|Josefin+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.body{
  background: #81c644;
  font-family: 'Josefin Sans', sans-serif;
}

.wrapper{
  margin-top: 10%;
}

.wrapper h1{
  font-family: 'Allura', cursive;
  font-size: 52px;
  margin-bottom: 60px;
  text-align: center;
}

.team{
  display: flex;
  justify-content: center;
  width: auto;
  text-align: center;
  flex-wrap: wrap;
}

.team .team_member{
  background: #fff;
  margin: 5px;
  margin-bottom: 50px;
  width: 300px;
  padding: 20px;
  line-height: 20px;
  color: #8e8b8b;
  position: relative;
}

.team .team_member h3{
  color: #81c644;
  font-size: 26px;
  margin-top: 50px;
}

.team .team_member p.role{
  color: #ccc;
  margin: 12px 0;
  font-size: 12px;
  text-transform: uppercase;
}

.team .team_member .team_img{
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
}

.team .team_member .team_img img{
  width: 100px;
  height: 100px;
  padding: 5px;
}