@media (min-width: 742px) {
  .container {
    height: calc(100vh - 2rem);
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 0.3fr 0.7fr 1fr;
    grid-template-areas:
      "seven one   one   four"
      "seven two   three four"
      "eight two   three four"
      "eight six   five  five";
  }
}
@media (max-width: 741px) {
  body {
    width: initial;
    height: initial;
  }
  .container {
    grid-template-areas:
      "one one"
      "two three"
      "four four"
      "five five"
      "six six"
      "seven eight";
    margin-block: 1rem;
  }
  .container div:nth-child(4),
  .container div:nth-child(6) {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .container div:nth-child(6),
  .container div:nth-child(8) {
    gap: 1rem;
  }
}
@media (max-width: 600px) {
  .container {
    grid-template-areas:
      "one"
      "two"
      "three"
      "four"
      "five"
      "six"
      "seven"
      "eight";
  }
  .container div:nth-child(2) {
    padding: 1rem;
  }
  .container div:nth-child(2) img {
    width: 100%;
  }
  .container div:nth-child(3) {
    padding-bottom: 0;
  }
  .container div:nth-child(3) img {
    margin-bottom: -2px;
    width: 70%;
  }
  .container div:nth-child(4) img {
    width: 100%;
    margin-block: 1rem;
  }
  .container div:nth-child(5) {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 3rem;
  }
  .container div:nth-child(6) {
    text-align: left;
    display: grid;
  }
  .container div:nth-child(8) img {
    width: 70%;
  }
}