/* .book-info {
    opacity: 0;
    display: none;
    transition: opacity 1s ease;
}

.book-info.active {
    opacity: 1;
    display: block;
} */

/*
 * NOVAS REGRAS PARA O CARROSSEL RESPONSIVO
 * ---------------------------------------
 * Estas regras permitem que os cards se ajustem e se centralizem
 * de forma elegante em qualquer tamanho de tela.
 */

 .books {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem para a próxima linha, resolvendo o overflow */
    justify-content: center; /* Centraliza os cards horizontalmente quando a linha não está cheia */
    gap: 10px; /* Adiciona espaçamento entre os cards */
    padding: 10px; /* Adiciona um pequeno preenchimento para as bordas */
}

.book-info {
    /* Define o tamanho base e permite que os cards se ajustem */
    flex: 1 1 250px; /* Cresce e encolhe a partir de uma largura base de 250px */
    max-width: 250px; /* Previne que os cards fiquem muito grandes em telas largas */
    
    /* Mantém as regras de opacidade e transição para o efeito de "carrossel" do JS */
    /* opacity: 0; */
    /* display: block; Mantenha 'block' para que o flexbox gerencie o layout */
    /* transition: opacity 1s ease; */
}

/* A regra .active do seu CSS original continua sendo necessária */
/* .book-info.active {
    opacity: 1; */
    /* display: block; já está na regra .book-info */
/* } */