div{
    text-align: center;
    font-family:'Grenze Gotisch';
    font-size:30px;
    color: #FFFDD0

}
.pic-container{
  display:grid;
  grid-template-columns: 3;
  grid-template-columns: 3;
  grid-gap: 0px;

}
.pic1{
  grid-column: 1;
  grid-row: 1;
  width: 640px;
  height: 360px;
  font-family:'Grenze Gotisch'
}

.pic1:hover{
background-image: url("row-1-col-1.jpg");
}
.pic2{
  grid-column: 2;
  grid-row: 1;
  width: 640px;
  height: 360px;
}

.pic2:hover{
background-image: url("row-1-col-2.jpg");
}
.pic3{
  grid-column: 3;
  grid-row: 1;
  width: 640px;
  height: 360px;
}

.pic3:hover{
background-image: url("row-1-col-3.jpg");
}
.pic4{
  grid-column: 1;
  grid-row: 2;
  width: 640px;
  height: 360px;
}

.pic4:hover{
background-image: url("row-2-col-1.jpg");
}
.pic5{
  grid-column: 2;
  grid-row: 2;
  width: 640px;
  height: 360px;
}

.pic5:hover{
background-image: url("row-2-col-2.jpg");
}

.pic6{
  grid-column: 3;
  grid-row: 2;
  width: 640px;
  height: 360px;
}

.pic6:hover{
background-image: url("row-2-col-3.jpg");
}

.pic7{
  grid-column: 1;
  grid-row: 3;
  width: 640px;
  height: 360px;
}

.pic7:hover{
background-image: url("row-3-col-1.jpg");
}
.pic8{
  grid-column: 2;
  grid-row: 3;
  width: 640px;
  height: 360px;
}

.pic8:hover{
background-image: url("row-3-col-2.jpg");
}

.pic9{
  grid-column: 3;
  grid-row: 3;
  width: 640px;
  height: 360px;
}

.pic9:hover{
background-image: url("row-3-col-3.jpg");
}