html {
  height: 100vh;
  width: 100%;
  background-color: black;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
h2 {
  color: white;
  margin: 0;
}
main {
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "a a a b"
    "a a a c"
    "d e f f";
}

@media (max-width: 35rem) {
  main {
    display: block;
  }
  section {
    display: block;
    width: 100%;
    min-height: 33%;
  }
  h2 {
    opacity: 0;
  }
}

@media (min-width: 35.1rem) and (max-width: 40rem) {
  main {
    grid-template-rows: repeat(4, 25%);
    grid-template-areas:
      "e e c c"
      "a a a a"
      "d f b b"
      "d f b b";
  }
}

@media (min-width: 40.1rem) and (max-width: 60rem) {
  main {
    grid-template-rows: repeat(3, 33.33%);
    grid-template-areas:
      "e e b b"
      "f a a c"
      "d a a c";
  }
}

@media (min-width: 60.1rem) and (max-width: 70rem) {
  main {
    grid-template-rows: repeat(4, 25%);
    grid-template-areas:
      "c a a b"
      "c e e b"
      "f e e d"
      "f e e d";
  }
}
section {
  background-color: red;
  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: center;*/
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  justify-items: center;
  align-items: center;
}
section img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
section div {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  padding: 1rem;
  margin: 0.5rem;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  border-radius: .5rem;
}
section div a {
  color: white;
  text-decoration: none;
}

.test {
  background-color: rebeccapurple;
  opacity: 0.3;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
section:nth-child(1) {
  grid-area: a;
}
section:nth-child(2) {
  grid-area: b;
}
section:nth-child(3) {
  grid-area: c;
}
section:nth-child(4) {
  grid-area: d;
}
section:nth-child(5) {
  grid-area: e;
}
section:nth-child(6) {
  grid-area: f;
}