.container-flex {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha em telas pequenas */
    gap: 15px; /* Espaço entre as imagens */
    justify-content: center; /* Centraliza as imagens */
	   
}

.img-responsiva {
   max-width: 100%; /* A imagem nunca será maior que o contêiner */
    height: auto; /* Mantém a proporção da imagem */
    width: calc(30% - 15px); /* Divide o espaço: 50% para cada uma, subtraindo o gap */
	
}

/* Responsividade extra para celulares muito pequenos */
@media (max-width: 600px) {
    .img-responsiva {
        flex: 1 1 100%; /* Imagens ficam uma embaixo da outra */
    }
}