#conteudo {
margin:0 auto;
text-align:center;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
align-items:stretch;/*padrao = stretch  flex-start*/
justify-content:center;
-webkit-flex-flow: row wrap;
-webkit-align-items:stretch;/*padrao = stretch  flex-start*/
-webkit-justify-content:center;
}

.cont{
flex:0 0 22%;
-webkit-flex:0 0 22%;
display: flex;
-webkit-flex-flow: row;
flex-flow: row wrap;/*se colocar column nao vai pra baixo - se não colocar wrap não funciona*/
align-items:center;
justify-content:center;
-webkit-align-items:center;
-webkit-justify-content:center;
text-align:center;
margin:3px;
padding:8px;
border-radius:12px;
background:#fff;
box-shadow:0 0 6px rgba(0,0,0,0.1);
}
@media screen and (max-width: 800px) {
.cont{
flex:0 0 98%;
-webkit-flex:0 0 98%;
}
}
/*alinhas dentro flex 3*/
.foto{border-radius:6px; text-align:center; overflow:hidden; width:100%!important;}
.foto img{width:100%; margin:0; padding:0;-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition:  all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;}
.foto img:hover{transform:scale(1.2); -webkit-transform:scale(1.2)); -moz-transform:scale(1.2); -o-transform:scale(1.2);}
.meio{background:#fff;align-self:auto; text-align:center; width:100%;}
.meio a{color:#333;}
.meio a:hover{color:#03c;}
.comprar{background:#06c; background-image: linear-gradinet(#03c, #06c); color:#fff; align-self:flex-end; -webkit-align-self:flex-end; max-width:140px; padding:4px 10px; border-radius:6px; margin:0 auto; text-align:center;}
.comprar a{color:#fff;}
.comprar a:hover{color:#f90;}