Olá, Thiago.

Tudo bem?

Esse comportamento de separar é normal, é uma característica da propriedade justify-content: space-between;, ele mantém os elementos separados de acordo com o espaço ou tamanho da tela. No caso para melhorar isso você pode alterar de justify-content: space-between; para o justify-content: space-evenly; que o espaçamento é menor e não separa, na verdade os elementos só vão diminiuir com o zoom. Testa ai e muda zoom.

Você precisa alterar o justify-content da classe .apresentacao:

Usando o evenly:

.apresentacao{ 
    display: flex;
    margin: 10%;
    align-items: center;
    justify-content: space-evenly;
}

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu Thiago.

Obrigado Renan! Testei com space-evenly, melhorou, mas, não chegou ao resultado que eu gostaria. Porém, mudando nas propriedades do justify-content para center na classe apresentação, deu certo! Agora ao diminuir o zoom da página, os elementos ficam em sua posição original.

.apresentacao {
    display: flex;
    align-items: center;
    justify-content: center;
}

Tive que colocar uma margin-right na section, aí deu um espaçamento entre ela e a imagem.

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-right: 5%;
}

Que top Michel. Qua bom que conseguiu! E muito obrigado por compartilhar a sua solução :)

Depois eu vou testar aqui. Valeu.