body {
  padding: 0px;
}
.parent {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(15, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  height: 98vh;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
.m {
  color: white;
  font-family: 'Exo', sans-serif;
  font-size: 25px;
  text-align: center;
  border: 3px solid black;
  overflow: hidden;
}

.image{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  transition: all 0.5s ease-in-out;
}
.div1 {
  grid-area: 1 / 5 / 4 / 12;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MarvelLogo.svg/220px-MarvelLogo.svg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid black;
  background-color: #F0131E;
}

.div2 {
  grid-area: 4 / 1 / 12 / 5;
}
.div2 .image{
  background-image: url("https://i.pinimg.com/originals/3c/8a/7c/3c8a7c619945872e4c05d6433abb0758.jpg");
  background-size: cover;
}

.div3 {
  grid-area: 12 / 1 / 16 / 7;
}
.div3 .image {
  background: url("https://www.mercurynews.com/wp-content/uploads/2020/03/Comic-16x9-1-1.jpg");
  background-size: cover;
}

.div4 {
  grid-area: 4 / 5 / 9 / 9;
}
.div4 .image {
  background: url("https://www.pixel4k.com/wp-content/uploads/2020/02/captain-america-comic-art_1581356780-1536x864.jpg");
  background-size: cover;
}

.div5 {
  grid-area: 9 / 5 / 12 / 10;
}
.div5 .image{
  background: url("https://upload.wikimedia.org/wikipedia/commons/f/f4/The_avengers_logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.div6 {
  grid-area: 4 / 9 / 9 / 12;
}
.div6 .image{
  background: url("https://images.theconversation.com/files/121281/original/image-20160504-22761-1ye9foh.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip");
  background-size: cover;
}

.div7 {
  grid-area: 9 / 10 / 16 / 13;
}
.div7 .image {
  background: url("https://i.pinimg.com/736x/96/98/a5/9698a5d48b9fdb3a9bb49f1e5fa8958d.jpg");
  background-size: cover;
}

.div8 {
  grid-area: 12 / 7 / 16 / 10;
}
.div8 .image {
  background: url("https://www.comicbookherald.com/wp-content/uploads/2018/06/new-ant-man-wasp-comics.jpeg");
  background-size: cover;
}

.div9 {
  grid-area: 4 / 12 / 9 / 16;;
}
.div9 .image {
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT1ZXtltLj8KiYILXF4ETm1rdNYzSI_XHpZcg&usqp=CAU");
  background-size: cover;
}

.div10 {
  grid-area: 9 / 13 / 16 / 16;
}
.div10 .image{
  background: url("https://crushingkrisis.com/assets/captainmarvel-by-mckelvie-675x1024.jpg");
  background-size: cover;
}

@media screen and (max-width: 800px) {
  .parent {
    display: flex;
    flex-direction: column;
  }
  #font{
    font-size: 10vw;
    transform: translate(0%, 180%);
  }
  [class*="div"] {
    max-width: 100vw;
    justify-content: center;
    margin-bottom: 20px;
  }
  .div1{
    min-height:200px;
  }
  .div2{
    min-height:400px;
  }
  .div3{
    min-height:200px;
  }
  .div4{
    min-height:200px;
  }
  .div5{
    min-height:200px;
  }
  .div6{
    min-height:300px;
  }
  .div8{
    min-height:200px;
  }
  .div7{
    min-height:400px;
  }
  .div9{
    min-height:200px;
  }
  .div10{
    min-height: 300px;
  }
}