No que se refere ao desafio proposto pela professora, eu acabo por enfrentar um problema, apesar de revisar o código várias vezes, infelizmente, ao tentar realizar um segundo carrossel "Mais Vendidos", eu acabo por me deparar com uma grande imagem estética de um dos livros (algo que não aconteceu com o primeiro carrossel). Desse modo, o que posso ter feito de errado ?
Código HMTL no index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraBooks</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="styles/header.css">
<link rel="stylesheet" href="styles/banner.css">
<link rel="stylesheet" href="styles/carrosel.css">
</head>
<body>
<header class="cabecalho">
<div class="container">
<input type="checkbox" id="menu" class="container__botao">
<label for="menu">
<span class="cabecalho__menu-hamburguer container__imagem"></span>
</label>
<ul class="lista-menu">
<li class="lista-menu__titulo">Categorias</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Programação</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Front-End</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Infraestrutura</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Business</a></li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Design & Ux</a></li>
</ul>
<img src="img/Logo.svg" alt="Logo da AluraBooks" class="container__imagem">
</div>
<div class="container">
<a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
<a href="#"><img src="img/Compras.svg" alt="Meu carrinho de Compras" class="container__imagem"></a>
<a href="#"><img src="img/Usuário.svg" alt="Meu perfil" class="container__imagem"></a>
</div>
</header>
<section class="banner">
<h2 class="banner__titulo">Já sabe por onde começar?</h2>
<p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
</section>