[Dúvida] Não consigo deixar o card ao lado do carrossel | HTML e CSS: responsividade com mobile-first

E aí, Guilherme! Cara, para colocar o elemento .card ao lado da seção .carrossel, você pode usar flexbox ou grid. Vou te mostrar como fazer isso com flexbox, que é uma opção mais usada para esse tipo de layout.

Primeiro, você precisa envolver tanto o .carrossel quanto o .card em um contêiner pai que será exibido como flex. É a falta desse contêiner que está fazendo seu card ficar abaixo, ao invés de ao lado.

No seu código HTML, crie um elemento que englobe ambos. Algo assim:

<div class="container">
  <section class="carrossel">
    <!-- Seu carrossel aqui -->
  </section>
  <div class="card">
    <!-- Seu card aqui -->
  </div>
</div>

Agora, no CSS, você pode aplicar as seguintes regras para o .container:

.container {
  display: flex; /* Torna os filhos flexíveis */
  justify-content: space-between; /* Espaço entre eles */
  align-items: flex-start; /* Alinhamento no topo */
  flex-wrap: wrap; /* Quebra para a próxima linha se não couber */
}

Com essas regras, o .carrossel e o .card ficarão um ao lado do outro. Se não couberem na mesma linha, eles vão para a próxima linha porque usamos flex-wrap: wrap;. Certifique-se de que o .carrossel e o .card tenham tamanhos apropriados para caberem lado a lado dentro do .container.

Isso deve resolver o problema. Se precisar de mais ajuda ou tiver alguma dúvida, é só falar!