Olá pessoal, queria compartilhar aqui a solução que tive para algo que ficou me incomodando nesse projeto. No layout de 1024px percebi que quanto mais a tela aumentava mais a lupa se afastava do texto no placeholder do input de pesquisa do banner.
Adicionando o seguinte código na versão mobile resolvi esse problema para todos os tamanhos: background-position: calc(50% - 120px);
A função calc() permite você executar cálculos quando especificar os valores de propriedades no CSS. (MDN Web Docs) Como o texto está centralizado determinei o meio do elemento (50%) e depois retirei desse valor 120px para deixar a lupa a esquerda do texto, como o texto não sofre alterações esse valor não precisa ser modificado.
Espero ter ajudado.
