Using HTML and CSS

Hola 👋🏻, algo de esto te pode interessar:

HTML / ACESSIBILIDADE:

• Em vez de usar background-image, poderia ser melhor usar o elemento <picture>, que é ideal para mostrar diferentes imagens de acordo com o dispositivo ou o tamanho da tela:

<picture>
<source media="(min-width: 600px)" srcset="img/perfume.png">
<img src="img/perfume-2.png" alt="descrição">
</picture>

• O ícone é uma imagem decorativa e, portanto, precisa de um atributo alt vazio para ser ignorado por um screen reader.

CSS:

• Como parte do reinicio de CSS que você fez, é importante incluir a propriedade box-sizing para permitir que incluamos padding e border no ancho e no alto geral dos elementos:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

• Piense en usar unidades relativas como rem o em, ya que son mejores para diseños escalonáveis. Algo simples para começar seria converter para rem (1 rem equivale a 16px por defeito). Considere esta sugestão especialmente para o font-size.

Espero que seja útil :)

Boa solução.

Saudações,