/*
|--------------------------------------------------------------------------
| load search product & result
|--------------------------------------------------------------------------
*/
.search-result-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.card-book-search {
    margin: 0px 10% 40px 10%;
    background-color: inherit;
    border: none;
    display: grid;
    grid-template-rows: auto 72px;
    max-width: 100%;
}
@media (max-width:768px){
    .search-result-content {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:539px){
    .search-result-content {
        grid-template-columns: 1fr;
    }
}
/* @media (max-width:1024px){
    .search-result-content {
        grid-template-columns: 1fr 1fr 1fr;
    }
} */


 /*
|--------------------------------------------------------------------------
| load search modules
|--------------------------------------------------------------------------
*/

.search-result-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media (max-width:767px){
    .search-result-modules {
        grid-template-columns: 1fr;
    }
}

.card-search-modules {
    margin-bottom: 40px;
    background-color: inherit;
    border: none;
    display: grid;
    grid-template-rows: auto 72px;
    width: 100%;
    padding: 5px;
}
.img-modules-search {
    width: 100%;
    height:320px;
    object-fit:cover;

}
.img-book {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.card-body-modules {
    flex: 1 1 auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 100%;
}


.text-title-book-arivals {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all!important;
    /* font-size: clamp(.75rem, 1vw, 1rem); */
    font-size: 1rem;
}

/* .nav-pills .nav-link {
    color: var(--bs-dark);
    background-color: var(--bs-light);
    border-radius: 5px;

} */



/* change filter */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--bs-primary);
    border-radius: 5px;

}

.media-types:hover, .media-types:focus, .media-types:active, .media-types:visited{
    color: var(--bs-dark);
    background-color: var(--bs-light);
    border-radius: 0;
}

.media-types {
    display: block;
    padding: .5rem 1rem;
    color: var(--bs-dark);
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}