* {
  margin: 0;
  box-sizing: border-box;
}
a{
 color:black;
}
body {
  font-family: "Lucida Sans", sans-serif;
}
.container-1 {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main right right right'
    'menu Main2 main2 main2 right2 right2'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: white;
max-width: 1200px;  /* Set the maximum width of the container */
  margin: 0 auto;       /* Center the container horizontally */
  padding: 20px;         /* Add some padding around the content */
  


 
  font-size: 16px;


}
.container-2 {
  display: grid;
  grid-template-areas:
  'header header header header header header'
    'menu main main right right right'
    'menu main2 main2 main2 right2 right2'
    'footer footer footer footer footer footer';  
  gap: 10px;
  background-color: white;
max-width: 1200px;  /* Set the maximum width of the container */
  margin: 0 auto;       /* Center the container horizontally */
  padding: 20px;         /* Add some padding around the content */
  


 
  font-size: 16px;


}

.item1 {
  grid-area: header;
  background-color: purple;
  text-align: center;
  color: #ffffff;
}

.item1  h1 {
  font-size: 40px;
}
.item2 {
  grid-area: menu;
  }
 .item2 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.item2 li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #9d99a3; 
}
<!-- the dark bulue on the book cover is #322e4f -->
<!-- the original clour is #33b5e5 -->
.item2 li:hover {
  background-color: #0099cc;
}
  
.item3 {
  grid-area: main;
vertical-align:top;
text-align:center;

}







.item4 {
  grid-area: right;
  border: 2px solid #0099cc;
  background-color: white;
  padding: 15px;
  color: #000000;
  

}
.item5{
grid-area: main2;
vertical-align:top;
text-align:center;
}

.item6{
grid-area: right2;
  border: 2px solid #0099cc;
  background-color: white;
  padding: 15px;
  color: #000000;
  
}



.item7 {
  grid-area: footer;
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
}

@media only screen and (max-width: 825px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}
  .item6 {grid-area: 6 / span 6;}
  .item7 {grid-area: 7 / span 6;}


}
img.bookcover {

width:300px;
height:450px;

box-shadow: 10px 10px 5px;
margin:5px;
}
img.diane {

width:300px;
height:375px;

box-shadow: 10px 10px 5px;
margin:5px;
}
img.jenny {

width:300px;
height:300px;

box-shadow: 10px 10px 5px;
margin:5px;
}