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

.cont{
flex:0 0 22%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-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:flex-start;
-webkit-align-items:flex-start;
justify-content:center;
-webkit-justify-content:center;
text-align:center;
margin:6px;
border-radius:12px;
background:#eee;
padding:6px;
}
@media screen and (max-width: 500px) {
.cont{
flex:0 0 80%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-webkit-flex:0 0 80%;
}
}
.cont div{margin:3px; width:100%;}
/*alinhas dentro flex 3*/
.foto{}
.foto img{width:98%;}
.meio{align-self:auto;}
.meio a{color:#333;}
.meio a:hover{color:#03c;}
.meio strong{color:#06f!important;}
.comprar{background:#c00; background-image: linear-gradient(#f90, #f00); color:#fff; align-self:flex-end; max-width:140px; padding:4px; border-radius:6px;}
.comprar a{color:#fff; text-decoration:none!important;}
.comprar a:hover{color:#f90;}
.preco{color:#000; font-weight:bold;}