#book_reviews_content{
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 30px 0px;
}

#books_list{
    /* border: 1px solid red; */

    width: 90%;
}

.books_anchor{
    text-decoration: none;
    color: rgba(245, 245, 245, 0.774);
}

.books_li{
    display: flex;
    flex-direction: row;
    /* border: 1px solid red; */
    margin: 20px 0px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
}

.book_info{
    /* border: 1px solid yellow; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    background: rgb(20,20,20);
    /* position: relative; */
}

.book_info > .info_heading{
    /* border: 1px solid yellow; */
    padding: 0px 15px 0px 15px;
    font-size: 30px;
    margin-left: 30px;
}

.book_info > .info_subheadings{
    /* border: 1px solid green; */
    list-style: none;
    text-decoration: none;
    padding: 0px 15px;
    margin-left: 30px;
    font-size: 15px;
}

.book_image{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* border: 1px solid green; */
    width: 30%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to right, rgba(20,20,20,1),rgba(20,20,20,0))
}

.book_image > img{
    width: 200%;
    height: 200%;
    z-index: -1;
}

/* ------------------ media queries ----------------------- */
@media (max-width: 700px) and (min-width: 551px){

    .book_info{
        width: 60%;
    }

    .book_image{
        width: 40%;
    }

    .book_info > .info_heading{
        padding: 0px 14px 0px 14px;
        font-size: 26px;
        margin-left: 26px;
    }

    .book_info > .info_subheadings{
        padding: 0px 14px;
        margin-left: 26px;
        
    }

    .book_info > .info_subheadings > li{
        font-size: 14px;
    }
}

@media (max-width: 550px) and (min-width: 451px){
    .book_info{
        width: 50%;
    }

    .book_image{
        width: 50%;
    }

    .book_info > .info_heading{
        padding: 0px 13px 0px 13px;
        font-size: 24px;
        margin-left: 24px;
    }

    .book_info > .info_subheadings{
        padding: 0px 13px;
        margin-left: 24px;
        
    }

    .book_info > .info_subheadings > li{
        font-size: 13px;
    }
}

@media (max-width: 450px) and (min-width: 351px){
    .book_info{
        width: 40%;
    }

    .book_image{
        width: 60%;
    }

    .book_info > .info_heading{
        padding: 0px 10px 0px 10px;
        font-size: 21px;
        margin-left: 10px;
    }

    .book_info > .info_subheadings{
        padding: 0px 10px;
        margin-left: 10px;
        
    }

    .book_info > .info_subheadings > li{
        font-size: 12px;
    }
}

@media (max-width: 350px) and (min-width: 251px){
    .book_info{
        width: 30%;
    }

    .book_image{
        width: 70%;
    }

    .book_info > .info_heading{
        padding: 0px 7px 0px 7px;
        font-size: 18px;
        margin-left: 1px;
    }

    .book_info > .info_subheadings{
        padding: 0px 7px;
        margin-left: 1px;
        
    }

    .book_info > .info_subheadings > li{
        font-size: 9px;
    }
}

@media (max-width: 250px){
    .book_info{
        width: 20%;
    }

    .book_image{
        width: 80%;
    }

    .book_info > .info_heading{
        padding: 0px 3px 0px 3px;
        font-size: 15px;
        margin-left: 0px;
    }

    .book_info > .info_subheadings{
        padding: 0px 3px;
        margin-left: 0px;
        
    }

    .book_info > .info_subheadings > li{
        font-size: 5px;
    }
}