.grid-container {
    width: 100%;
    overflow-x: auto;
}

#div-book1,#div-book2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap:2em
    
}

@media (min-width: 600px) and (max-width: 750px) {
    #div-book1,#div-book2 {
        grid-template-columns: repeat(2, 1fr);
    
    }
}
@media (min-width: 750px) and (max-width: 1100px) {
    #div-book1,#div-book2 {
        grid-template-columns: repeat(2, 1fr); 
        column-gap: 8em;
    }
}

@media (max-width: 600px){
    #div-book1,#div-book2 {
        grid-template-columns: repeat(1, 1fr); 
    }
}



@media (min-width: 1100px) {
    #scroll-continer {
        display: flex;
        justify-content: center;
        gap: 4em;
    }
}