/* Style */
.panel1, .flip1 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
.flip1 {
	background-color: coral;
}
.panel1 {
    padding: 5px;
    display: none;
}

.panel2, .flip2 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
.flip2 {
	background-color:darksalmon;
}
.panel2 {
    padding: 5px;
    display: none;
}

.panel3, .flip3 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
.flip3 {
	background-color:aqua;
}
.panel3 {
    padding: 5px;
    display: none;
}


.panel4, .flip4 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
.flip4 {
	background-color:darkgray;
}

.panel4 {
    padding: 5px;
    display: none;
}

.panel5, .flip5 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
.flip5 {
	background-color:deeppink;
}
.panel5 {
    padding: 5px;
    display: none;
}

.panel6, .flip6 {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
.flip6 {
	background-color:indianred;
}
.panel6 {
    padding: 5px;
    display: none;
}


.responsive {
    width: 100%;
    height: auto;
}


.grid-books {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-template-rows: repeat(3, 320px);
	grid-gap: 10px;
	background:#F5CBCC;
			}          

.grid-books img {
	width: 100%;
	object-fit: cover;

            }

 .KI{
	width:95%;
	/*height:50vh;*/
          	}