@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;

    grid-template-areas:
      "header-item header-item"
      "mobile mobile"
      "keyboard game"
      "touch touch"
      "twiter icloud"
      "ipad icloud"
      "popular popular"
      "tv tv";
  }

  .header-item {
    grid-area: header-item;
  }

  .mobile {
    grid-area: mobile;
    display: flex;
    align-items: center;
    padding-inline: 50px;
  }

  .keyboard {
    grid-area: keyboard;
  }

  .game {
    grid-area: game;
  }

  .touch {
    grid-area: touch;
    display: flex;
    align-items: center;
    padding-inline: 58px;
    gap: 45px;
  }

  .twiter {
    grid-area: twiter;
  }

  .ipad {
    grid-area: ipad;
  }
  .ipad .img1 {
    top: 135px;
  }

  .icloud {
    grid-area: icloud;
  }

  .popular {
    grid-area: popular;
  }

  .tv {
    grid-area: tv;
    flex-direction: row;
    align-items: center;
    padding: 0 20px;
    justify-content: center;
    gap: 20px;
  }
  .tv img {
    width: 80%;
  }
  .tv .left,
  .tv .right {
    width: 50%;
  }
  .tv .heading {
    text-align: start;
    font-size: 25px;
  }
}














@media (min-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-columns: 1fr;

    grid-template-areas:
      "mobile mobile header-item header-item"
      "keyboard touch touch icloud"
      "game ipad ipad icloud"
      "twiter popular tv tv";
  }

  .mobile {
    grid-area: mobile;
  }

  .header-item {
    grid-area: header-item;
  }

  .keyboard {
    grid-area: keyboard;
  }

  .touch {
    grid-area: touch;
  }
  .touch img {
    width: 200%;
    transform: translateX(-250px);
  }
  .icloud {
    grid-area: icloud;
  }

  .game {
    grid-area: game;
  }

  .ipad {
    grid-area: ipad;
  }

  .twiter {
    grid-area: twiter;
  }

  .popular {
    grid-area: popular;
  }

  .tv {
    grid-area: tv;
  }

  .ipad .img1 {
    top: 55px;
  }
}