@media screen and (max-width: 720px) {
  :root {
    /* Font sizes: */
    --regular: 18px;
    --large: 24px;
    --larger: 32px;
    --x-large: 50px;
  }

  body {
    height: auto;
  }

  .grid {
    padding: 5vh 4vw;
    grid-template-columns: 1fr;
    grid-template-rows: 
      1.1fr 0.6fr 0.8fr 1.6fr
      1.3fr 0.8fr 0.8fr 1.3fr;
    grid-template-areas:
      "cardA"
      "cardB"
      "cardC"
      "cardD"
      "cardE"
      "cardF"
      "cardG"
      "cardH";
  }

  .grid .item:nth-child(1) {
    .wrapper {
      gap: .5rem;
    }
    img {
      width: 65%;
    }
  }

  .grid .item:nth-child(2) {
    img {
      width: 100%;
    }
  }

  .grid .item:nth-child(3) {
    justify-content: space-between;
    img {
      width: 75%;
    }
  }

  .grid .item:nth-child(4) {
    padding: 2rem 1.25rem;
    align-items: center;
    img {
      width: 100%;
    }
    .small-text {
      text-align: center;
    }
  }

  .grid .item:nth-child(5) {
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 75%;
    }
    .large-text {
      text-align: center;
      width: 75%;
    }
  }

  .grid .item:nth-child(6) {
    padding: 1.5rem;
    img {
      width: 62%;
    }
  }

  .grid .item:nth-child(7) {
    justify-content: start;
    padding: 2rem;
    .large-text {
      font-size: 1.75rem;
    }
    img {
      width: 65%;
    }
  }

  .grid .item:nth-child(8) {
    img {
      width: 80%;
    }
  }
}