.book-section {
    background: url("../images/parchment.png");
    background-size: cover;
}



.book-layout {
    display: flex;
    align-items: center;
    gap: 80px;
}



.book-cover {
    flex: 1;
    text-align: center;
}



    .book-cover img {
        width: 350px;
        border-radius: 8px;
        box-shadow: 0 30px 60px rgba(0,0,0,.45);
        transform: rotate(-3deg);
        transition: .5s ease;
    }



        .book-cover img:hover {
            transform: rotate(0deg) translateY(-15px);
        }



.book-content {
    flex: 1;
}



    .book-content h2 {
        font-size: 55px;
        color: var(--dark-leather);
    }



    .book-content h3 {
        color: var(--gold);
        font-size: 30px;
    }



    .book-content p {
        font-size: 23px;
        line-height: 1.7;
    }


/* =====================================
   BOOK RESPONSIVE
===================================== */

@media(max-width: 900px) {

    .book-layout {
        gap: 45px;
    }


    .book-cover img {
        width: min(300px, 100%);
    }


    .book-content h2 {
        font-size: clamp(38px, 6vw, 50px);
    }


    .book-content p {
        font-size: 20px;
    }
}


@media(max-width: 700px) {

    .book-layout {
        flex-direction: column;
        text-align: center;
        gap: 35px;
    }


    .book-cover,
    .book-content {
        width: 100%;
    }


        .book-cover img {
            width: min(280px, 82vw);
            margin-inline: auto;
            transform: rotate(-2deg);
        }


        .book-content h2 {
            font-size: 36px;
        }


        .book-content h3 {
            font-size: 24px;
        }


        .book-content p {
            font-size: 18px;
            line-height: 1.65;
        }
}

/* =====================================
   BOOK COVER HOVER
===================================== */

.book-cover a {
    display: inline-block;
    border-radius: 10px;
    /* Gives the enlarged cover room */
    overflow: visible;
}


.book-cover a:hover img {
    transform:
        scale(1.08)
        rotate(-1deg);

    box-shadow:
        0 28px 55px rgba(0,0,0,.5);
}


/* Mouse / desktop devices only */

@media (hover: hover) and (pointer: fine) {

    .book-cover a:hover img {
        transform: scale(1.12);
        box-shadow: 0 28px 55px rgba(0,0,0,.5);
    }
}