Desafio | HTML e CSS: responsividade com mobile-first

Oi, tudo bem?

Sinto muito que esteja com dificuldades, para realizar esta atividade. Mas vou te ajudar!

Há dois problemas no seu código, um no arquivo "index.html" e outro no arquivo "banner.css", que geram os problemas do tamanho dos livros do carrossel.

No primeiro caso há duas tags <scripts> adicionadas antes da segunda seção com o carrossel e o card. Isso faz com que antes da segunda seção ser renderizada, os componentes JavaScripts sejam lidos pelo navegador e a segunda seção não do carrossel não recebe o mesmo padrão que a primeira.

Dessa forma precisamos remover essa duplicidade de informação das tags <scripts>já informadas ao final do código HTML. Ficaria assim:

<!-- PRIMEIRA SEÇÃO DO CARROSSEL E DO CARD -->
    <section class="carrosel">
       ...RESTANTE DO CÓDIGO 
    </section>
    <!-- SEGUNDA SEÇÃO DO CARROSSEL E DO CARD -->
    <section class="carrosel">
     ...RESTANTE DO CÓDIGO
    </section>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper', {
            spaceBetween: 10,
            slidesPerView: 3,
            pagination: {
                el: '.swiper-pagination',
                type: 'bullets',
            },
        });
    </script>

Já no arquivo "banner.css" temos a classe carrosel que recebe informações de altura e largura (heighte width) que interferem no tamanho dos livros do carrossel, fazendo com que eles se sobreponham mutualmente, desformatando a página. Dessa forma, podemos remover todas as propriedades aplicadas a classe carrosel e incorporar a cor de fundo (background: var(---branco);) à classe .carrosel_titulo. Ficaria assim:

.carrosel_titulo{
    font-family: var(---fonte-principal);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: var(---laranja);
    padding:1em 0 0.5em 0;
    background: var(---branco);
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!