How to leave several images responsive

section {
	font:bold;
	text-align: center;
}

h1 {
	font-size: 30px;
	text-align: center;
	color: #fff;
}

img  {
width: 233px;
height: 302px;
border-radius: 5px;
cursor: pointer;
-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

img:hover {
-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}

h2 {
	color: #fff;
	font-size: 20px;
	line-height: -0.6;
}

p {
	color: #fff;
	font-size: 15px;
	line-height: 2.50;

}

/*Alinhando as caixas*/

.caixa-e {

	position: absolute;
	top: 50%;
	left: 5%;
	transform: translate(-5%,-50%);
}

.caixa-d {

	position: absolute;
	top: 50%;
	left: 28%;
	transform: translate(-28%,-50%);
}

.caixa-m {

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


.caixa-j {

	position: absolute;
	top: 50%;
	left: 72%;
	transform: translate(-72%,-50%);
}

.caixa-w {

	position: absolute;
	top: 50%;
	left: 95%;
	transform: translate(-95%,-50%);
}

<section class="section">

<h1>Dream Team</h1>

<div class="caixa-e">


<img src="img/erian.jpg">

<h2>Erian Erik  ★ </h2>	
<p>Lider do projeto </p>
</div>

<div class="caixa-d">


<img src="img/DANI.jpg">
<h2>Danielle Saluti</h2>	
<p>Analista e Redatora</p>
</div>

<div class="caixa-m">


<img src="img/mat.jpg">
<h2>Matheus Magalhaes</h2>	
<p>Programador Java</p>
</div>

<div class="caixa-j">


<img src="img/JEAN.jpg">
<h2>Jean Braga</h2>	
<p>administrador Banco de dados</p>
</div>

<div class="caixa-w">


<img src="img/walter.jpg">
<h2>João Vitor</h2>	
<p>	Auxiliar geral</p>
</div>
</section>