Erro na responsividade

Olá Eduarda! O layout tá bacana. Acho que alguns ajustes no CSS vão resolver os problemas de responsividade que você mencionou.

Uso do display: grid com duas colunas no mobile. No seu CSS, você já tem isso aqui no media query:

@media screen and (max-width: 768px) {
    .container {
        display: block;
        background-image: none;
    }
}

Pode adicionar também:

.container {
    grid-template-columns: 1fr;
    height: auto;
    padding: 1em;
}

Margens exageradas no mobile. No CSS original, você tem margens como margin: 0 10em; nas seções .secundario e .terciario, o que gera overflow em telas pequenas.

Adicione isso no media query para resolver:

.secundario,
.terciario {
    flex-direction: column;
    margin: 1em;
    gap: 1.5em;
}

Imagens sem limite de largura. No mobile, o width: 80vw funciona, mas pode ultrapassar o contêiner. Melhor adicionar:

.secundario__imagem,
.terciario__imagem {
    max-width: 100%;
    height: auto;
}

O principal está forçando 100vh. No mobile, 100vh pode gerar problemas por conta da barra de endereços do navegador. Pode trocar no media query:

.principal {
    height: auto;
    padding: 2em 1em;
    background-size: contain;
}

Flex reverso no .terciario. No desktop está com:

.terciario {
    flex-direction: row-reverse;
}

Isso pode confundir no mobile. No media query, você pode forçar:

.terciario {
    flex-direction: column;
}

Versão atualizada do media query:

@media screen and (max-width: 768px) {
    .container {
        display: block;
        grid-template-columns: 1fr;
        padding: 1em;
        height: auto;
        background-image: none;
    }

    .container__caixa {
        margin: 2em 1em;
    }

    .secundario,
    .terciario {
        flex-direction: column;
        margin: 1em;
        text-align: center;
        gap: 1.5em;
    }

    .secundario__imagem,
    .terciario__imagem {
        max-width: 100%;
        height: auto;
    }

    .rodape__lista {
        display: block;
        text-align: center;
    }

    .principal {
        height: auto;
        padding: 2em 1em;
        background-size: contain;
    }
}

Espero que vai funcionar.

Eu realizei as mudanças solicitadas e, ao recarregar a página (já tinha feito o commit e o push) e mesmo assim não houve mudanças, o que eu posso fazer agora?

Olá, Eduarda! O arquivo styles.css no GitHub foi atualizado. Você fez novo deploy com o Vercel? Também pode usar para deployment o GitHub Pages. Ele faça deploy automaticamente após cada atualização no repositório.