Cards alinhados na vertical ao invès de horizontal

Oii, Yan!

Verifiquei aqui e tá tudo certinho:

Você deve ter encontrado o erro. Parabéns!

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

o erro é dentro do card, na seção de recomendados. Os cards estão alinhados vertcialmente ao invés de horizontalmente.

Oii, Yan!

Agora entendi. Verifiquei o erro aqui:

• Nome incorreto no import do CSS module e no nome do arquivo

  Seu código:

  import styles from './Post.modules.css';
  

  Código correto:

  import styles from './Post.module.css';
  

Ajuste o import e o nome do arquivo, pos ambos estão com a grafia errada Post.modules.css.

O React (usando ferramentas como Webpack ou Vite) só trata o CSS como CSS Modules se o arquivo terminar com .module.css.

Ou seja:

Post.module.css  // estilos aplicados como módulos, com escopo isolado
Post.modules.css  // tratado como CSS comum, os estilos não são aplicados via objeto `styles`

O que é CSS Module?

É um recurso que permite importar o CSS como um objeto JavaScript, onde cada classe vira uma propriedade. Isso evita conflito de nomes e garante que os estilos fiquem escopados ao componente.

Exemplo:

/* Post.module.css */
.tituloOutrosPosts {
  color: red;
}

import styles from './Post.module.css';

<h2 className={styles.tituloOutrosPosts}>Título</h2>

Nesse caso, o React compila a classe tituloOutrosPosts com um nome único (ex: Post_tituloOutrosPosts__8A4Rt), evitando conflitos com outros arquivos CSS.

Se o nome estiver errado (como .modules.css):

• O arquivo será tratado como CSS global.
• O objeto styles será vazio ou undefined.
• As classes escritas como className={styles.minhaClasse} não funcionarão.
• Os estilos não serão aplicados.

Resumo: o sufixo .module.css é obrigatório para que o React entenda que você quer usar CSS Modules e consiga aplicar os estilos corretamente via styles.nomeDaClasse.

Espero ter ajudado a entender o motivo do erro.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!