CSS FLEX, media query

Olá John, parabéns pro ter conseguido concluir o desafio.

Notei que seu arquivo está sem imagem, isso se deu porque na sua tag <img/>,você passou os diretórios errados, para consertar isso basta remover o assets/images de ambos.

Agora algumas dicas, percebi que você utilizou várias <div> no seu projeto, o que não está errado no quesito de estrutura de html, mas ter apenas <div> faz com que seu html não fique semântico, e é extremamente recomendável usar o html semântico. Aqui um link sobre: W3School - Semantic HTML.

Relacionado aos headings notei que você utilizou a <h3> e <h4>, acredito eu que devido a serem mais próximas do design proposto, mas o correto é sempre começar em uma ordem hierárquica, isso é, começar pelo <h1> e ir descendo, pois isso ajuda no quesito de acessibilidade. Aqui um link sobre isso: W3School - Heading Levels.

Já no CSS essa borda branca que ficou em volta do fundo amarelo se dá pelo fato de que o arquivo base já vem com um padding e margin definidos, se quiser remover esse espaçamento branco nas bordas você pode usar o seguinte seletor e propriedades:

* {
  padding: 0;
  margin: 0;
}

Esse é o seletor global, ele é bastante usado para fazer um reset, e quando você utilizar ele, todos os elementos irão receber as propriedades dentro dele, ou seja, todos elementos irão ficar com padding 0 e margin 0, o que talvez possa ajudar na hora de montar o layout.

Uma outra dica vai para as fontes, notei que você utilizou px para as fontes, isso não é errado também, mas no quesito de acessibilidade pode ser problemático, isso devido as unidades de medidas de px serem absolutas. O recomendável é utilizar a medida rem, pois ela é relativa, isso faz com que ela se adapte as configurações de fonte do navegador do usuário.

Também tem a parte de que o título principal não está com o efeito de hover, para adicionar esse efeito, basta fazer dessa forma .title-content:hover, daí é só adicionar os estilos desejados.

E agora algo mais da minha opinião, que é, tome cuidado quando for nomear as variáveis, por exemplo, você nomeou uma variável assim: --corbranca, o que pode as vezes não ser o ideal, porque não dá pra ver uma separação de palavras, o melhor seria utilizar com kebab-case ou camelCase, ficando assim: --cor-branca ou --corBranca, pois assim facilita a leitura.

Edit: Havia esquecido de mencionar, mas como você já está usando esse trecho no seu html:

  <meta charset="UTF-8">

Acaba que não é necessário utilizar o @charset "UIF-8"; no seu CSS.

E novamente, parabéns por ter concluído seu projeto, caso algo que eu tenha dito tenha ficado confuso, por favor, comente aqui embaixo que tentarei responder da melhor forma possível.