.top {
  font-family: permanent marker;
  font-size: 25px;
  text-align: center;
  grid-area: top;
  height: 5vh;
  width: auto;
  align-content: center;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/FULL-BODY-HOT.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}

.heroImg {
  grid-area: heroImg;
  text-align: center;
  height: 20vh;
  width: auto;
  align-content: center;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/ryan-reynolds-HOT.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.para1 {
  font-family: nova square;
  grid-area: para1;
  height: 50vh;
  width: auto;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/ITS-EVERYWHERE.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

.para2 {
  font-family: nova square;
  grid-area: para2;
  height: 50vh;
  width: auto;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/SHIRTLESS.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.para3 {
  font-family: nova square;
  grid-area: para3;
  height: 50vh;
  width: auto;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/ME-NOT-HER.png);
  background-repeat: no-repeat;
  background-position: center;
}

.para4 {
  font-family: nova square;
  grid-area: para4;
  height: 50vh;
  width: auto;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/ryan-reynolds-also-HOT.png);
  background-repeat: no-repeat;
  background-position: center;
}

.bottom {
  font-family: nova square;
  text-align: center;
  grid-area: bottom;
  height: 5vh;
  width: auto;
  align-content: center;
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/FULL-BODY-HOT.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}

.grid-container {
  display: grid;
  grid-template-areas:
    "top top top top"
    "heroImg heroImg heroImg heroImg"
    "para1 para2 para3 para4"
    "bottom bottom bottom bottom";
  gap: 2px;
  padding: 2px;
  background-color: rgb(84, 124, 113);
}

.grid-container > div {
  color: rgb(96, 255, 234);
  padding: 10px 5px;
}

body {
  padding: 0px 15vw;
  background-color: rgb(96, 95, 95);
  background-image: url(https://beardallb2027.smtchs.org/Grid_Layout_2_Beardall/Imgs/RYAN-WHAT-ARE-YOU-DOING.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 97vh;
}

.Ryan {
  height: 100%;
  width: auto;
  image-resolution: auto;
}