.books h2 {
    text-align: left;
    font-size: 6.5rem;
    font-weight: 800;
    margin-top: 140px;
    margin-left: 50px;
    letter-spacing: 1px;
    line-height: 0.9em;
    margin-bottom: 20px;

}

.books p {
    text-align: left;
    font-size: 1.1rem;
    font-weight: 300;
    margin-bottom: 20px;
    line-height: 1.2em;
    margin-left: 50px;
    letter-spacing: 1px;
    max-width: 600px;
}

.books a {
    color: var(--text);
    font-weight: 400;

}

/* Grelha dos cartões de livros */

.books-grid {

    display: grid;
    /* --NUMERO DE COLUNAS-- */
    grid-template-columns: repeat(2, 1fr);
    /* gap:7vh; */
    gap: 0vh;


}


/* Estilo dos cartões de livro */

.book-card {

    position: relative;
    /* height: 50vh ; */
    height: 100vh;

    overflow: hidden;
    /* border-radius:10px; */
    border-radius: 0px;
    display: block;
    background: #e9e9e9;
}

/* Imagens e efeito hover dos cartões */

.book-card img {

    position: absolute;
    width: 100%;
    height: 100%;
    /* transform:translate(-5%, -5%); */

    object-fit: cover;
    z-index: 0;
    border-radius: inherit;


    transition: opacity 0.5s ease;
}



.book-card .main-img {
    opacity: 1;
}

.book-card .hover-img {
    opacity: 0;
}

.book-card:hover .main-img {
    opacity: 0;
}

.book-card:hover .hover-img {
    opacity: 1;
    /*transform:scale(1.05);*/
}


/* Camada escura sobre os cartões */

.overlay {

    position: absolute;
    inset: -1px;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .5) 0%,
            rgba(0, 0, 0, .05) 20%,
            rgba(0, 0, 0, 0) 60%);

}

body.light-theme .overlay {

    position: absolute;
    inset: -1px;
    z-index: 1;
    pointer-events: none;

    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.05) 20%,
            rgba(0, 0, 0, 0) 60%);

}

/* Fim da camada escura */



/* Nome do livro sobre a imagem */

.book-card h3 {

    position: absolute;

    /*  --POSIÇÃO DO TEXTO NA IMAGEM--  */
    left: 25px;
    bottom: 12px;

    color: white;

    font-size: 15px;
    font-weight: 420;
    line-height: 1.4em;
    letter-spacing: 0.035em;

    width: 90%;

    z-index: 2;
    text-transform: uppercase;

}


.view-more-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 8px 20px;
    border-radius: 999px; */

    /* border: 1px solid var(--surface-border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none; */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.2s ease, background 0.2s ease;
    text-align: center;
    width: fit-content;

    font-size: 11px;
    margin: 20px 50px 20px 50px;
    padding: 10px;

}

.view-more-btn:hover {
    transform: translateY(-1.5px);
    background: rgba(255, 255, 255, 0.16);
}

body.light-theme .view-more-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}



/*-------------- M O B I L E  ----------------------------------------------------------------------------------*/

@media (max-width: 1023px) {

    .books h2 {
        font-size: clamp(9vw, 1em, 10vw);

        line-height: 1em;
        font-weight: 800;
        max-width: 80vw;
        padding-left: 5vw;
        padding-right: 5vw;
        margin-bottom: 12px;
        margin-left: 0;
    }

    .books-grid {

        grid-template-columns: 1fr;
        gap: 0;
    }


    /* Estilo dos cartões de livro */

    .book-card {

        height: 90vh;
        border-radius: 0px;
    }

    /*  --POSIÇÃO DO TEXTO NA IMAGEM--  */
    .book-card h3 {

        left: 5vw;

        bottom: 5px;

        color: #FFFFFF;
        font-weight: 600;

    }

    .books p {
        max-width: 80vw;
        font-size: 1rem;
        line-height: 1.15em;
        max-width: 100vw;
        padding-left: 5vw;
        padding-right: 5vw;
        margin-bottom: 20px;
        margin-left: 0;
    }

    .buy {
        margin: 20px auto 50px 5vw;
        font-size: 2.2vw;
        max-width: 80vw;

    }

    .view-more-btn {
        max-width: 100vw;
        padding-left: 5vw;
        padding-right: 5vw;
        font-size: clamp(1vw, 2em, 1.5vw);


    }


}