index.css

.main {
    background-color: rgb(232, 236, 236);
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: repeat(7, auto);
   grid-template-areas: "title title title title"
                        "tag tag tag tag"
                         ". img img ."
                         "timeline timeline timeline timeline"
                         "quote quote quote quote"
                         "link link link link"
                         "footer footer footer footer";
}
.title{
  grid-area: title;
  /* justify-self: center;
  align-self: center;*/
  font-size: 2em;
  word-breaK:break-word;
  display: flex;
  justify-content: center;
}
#tagline{
  grid-area: tag;
  /*justify-self: center;
  align-self: center;*/
  font-size: 2em;
  word-breaK:break-word;
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}
#img-div{
  grid-area: img;
  justify-self: center;
  align-self: center;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-template-areas: "photo"
                       "caption";
  padding: 10px 10px 10px 10px;
}
#image {
  object-fit: cover;
  /*width: 100%;
  max-height: 100%;*/
  max-width: 500px;
  height: auto;
  grid-area: photo;
  justify-self: center;
  align-self: center;
  border-color: blue;
  border-width: 5px;
  border-style: groove;
  border-radius: 15px;
}
#img-caption{
  grid-area: caption;
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  padding-top: 25px;
  padding-bottom: 50px;
  font-size: 2rem;
}
#tribute-info{
  grid-area: timeline;
  border-color: red;
  border-width: 5px;
  border-style: groove;
  border-radius: 15px;
  /*justify-self: center;
  align-self: center;*/
  display: grid;
  grid-template-rows: repeat(22, auto);
  grid-template-columns: auto auto;
  grid-template-areas: "year info";
  word-break: break-word;                      
}
#timeline-year {
  grid-area: year
  align-self: center;  
  border-color: black;
  border-width: 2px;
  border-style: solid;
  border-left: 0;
  border-right: 0;
  font-size: 2rem;
  word-break: break-word;
  display: flex;
  justify-content: center;

}

#timeline-info {
  grid-area: info
  align-self: center;
  border-color: black;
  border-width: 2px;
  border-style: solid;
  border-left: 0;
  border-right: 0;
  font-size: 1.5rem;
  padding-left: 3rem;
  display: flex;
  justify-content: flex-start;
}
.quote{
  grid-area: quote;
  padding: 50px 0px 50px 0px;
  font-size: 2rem;
}
.link{
  grid-area: link;
  justify-self: center;
  align-self: center;
  display: flex;
  font-size: 2rem;
  justify-content: stretch;
}
.footer{
  grid-area: footer;
  justify-self: center;
  align-self: center;
  padding-top: 70px;
  display: flex;
  font-size: 2rem;
  justify-content: stretch;
}
a:hover {
  color: red;
  text-decoration: underline overline;
}

/*li{
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
  font-family: avenir;
  font-size: 1.8rem;
  justify-self: start;
  padding: 15px 0px 15px 0px;
}*/
/*body {
  background: #f5f5f5;
}*/