Olá, Ryan! Tudo bem?
Baixei seu projeto e a imagem está se movimentando sim:

No entanto, se você quer que no responsivo ela fique abaixo da sua apresentação, você pode mudar o estilo da classe apresentação para:
.apresentacao {
padding: 5% 15%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 2.875rem;
}
O que adicionei:
1. justify-content: center;
- O que faz: Controla o alinhamento dos itens ao longo do eixo principal (que, por padrão, é o eixo horizontal).
- Efeito: Com
center
, os itens dentro do container são centralizados horizontalmente. Se houver espaço extra no container, ele será distribuído igualmente à esquerda e à direita dos itens. - Exemplo prático: A imagem e a seção de apresentação dentro do
.apresentacao
ficarão agrupados e centralizados no meio do container, em vez de alinhados à esquerda ou à direita.
2. flex-wrap: wrap;
- O que faz: Controla se os itens dentro do container devem "quebrar" para uma nova linha quando não couberem no espaço disponível.
- Efeito: Com
wrap
, os itens que não couberem em uma única linha serão movidos para a linha seguinte. Isso é útil para layouts responsivos, onde o conteúdo precisa se adaptar a diferentes tamanhos de tela. - Exemplo prático: Quando o container
.apresentacao
não tiver espaço suficiente para todos os itens em uma única linha, os itens extras(imagem) serão automaticamente movidos para a linha de baixo, mantendo o layout organizado.
3. gap: 2.875rem;
- O que faz: Define o espaçamento entre os itens dentro do container, tanto horizontalmente quanto verticalmente.
- Efeito: Adiciona um espaço fixo de
2.875rem
(aproximadamente 46 pixels, dependendo do tamanho da fonte) entre os itens. Isso evita a necessidade de usar margens manuais para separar os elementos. - Exemplo prático: A imagem e a seção de apresentação dentro do
.apresentacao
terão um espaçamento uniforme de 2.875rem
em relação aos outros, tanto na horizontal quanto na vertical para não ficarem colados.
Espero ter ajudado. Conte sempre com o apoio do fórum :)
Um abraço e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓