* {
    margin: 0px;
    padding: 0px;
}

body {
    overflow: hidden;

    /* --title-height: 20vw;
    --filter-height: 30vw; */
}

#vue-app {
    /* width: 100%; */
    /* height: 98vh; */
    /* width: 100vw; */
    /* width: 500px; */

    /* display: grid;
    grid-template-rows: auto auto 1fr; */

    font-size: 2vw;
    /* font-size: x-large; */
}

#title {
    font-size: 8vw;
    /* font-size: xxx-large; */
    text-align: center;
    /* height: 20vw; */
    padding: 0;
    padding: 2vw;
}

#filter {
    padding-left: 7vw;
}

#filter div {
    /* flex: 1; */
    display: grid;
    grid-template-columns: 30% 60%;
    /* height: var(--filter-height); */
    /* padding-left: 5vw; */
    /* overflow: scroll; */
}

#filter div * {
    font-size: inherit;
    align-content: center;
    padding: 3vw;
}

#filter div select,
#filter div input {
    padding: 2vw;
    text-align: center;
    border-radius: 2vw;
    background-color: white;
    height: fit-content;
}

#liste {
    /* flex: 1; */
    /* display: flex;
    flex-direction: column; */
    overflow: scroll;
    /* height: calc(95vh - var(--filter-height) - var(--title-height)); */
    height: 80vh;
    padding-left: 7vw;
    padding-right: 7vw;
}

/* #liste ul { */
.book-item {
    margin-top: 2vw;
    padding: 2vw;
    border: 3px solid black;
    border-radius: 3vw;
    height: fit-content;
    display: grid;
    grid-template-areas:
        "img title"
        "img txt"
        "img desc"
        "img desc"
        "img desc"
        "img desc"
        "img desc";
    grid-template-columns: 1fr 2fr;
    gap: 1vw;
}

#book-grid {
    display: grid;
    gap: 1.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
}

.book-list-title {
    font-size: 2vw;
}

.book-list-author {
    font-size: 1.5vw;
}

img {
    height: 10vw;
}