/******* sm (Phones) *******/
@media (max-width: 640px) {
  .grid {
    grid-template-areas: none;
  }
  .chemicalLabs {
    grid-area: 1/1/2/-1;
    padding-block: 50px;
  }
  .chemicalLabs h1 {
    font-size: 38px;
    line-height: 1.4;
    padding-block: 10px;
  }
  .iphone6 {
    grid-area: 2/1/3/-1;
    flex-direction: column;
  }
  .iphone6__content {
    width: 90%;
    padding-bottom: 15px;
  }
  .iphone6__image {
    width: 80%;
  }
  .keyboard {
    grid-area: 3/1/4/-1;
    padding: 50px;
  }
  .controller {
    grid-area: 4/1/5/-1;
    padding: 50px;
  }
  .controller h2 {
    max-width: 280px;
  }
  .imac {
    grid-area: 5/1/6/-1;
    flex-direction: column;
    gap: 20px;
    padding: 50px 20px;
  }
  .imac__left {
    width: 100%;
  }
  .imac__right {
    width: 100%;
  }
  .imac__left .imac__image {
    width: 180%;
    translate: -55% 0;
  }
  .twitter {
    grid-area: 6/1/7/-1;
  }
  .ipad {
    grid-area: 7/1/8/-1;
  }
  .ipad__image {
    translate: -40px 0px !important;
    width: 90%;
  }
  .ipad__image {
    translate: -50px 30px;
  }
  .ipad__backword {
    font-size: 1600% !important;
    bottom: -80px !important;
    right: 10px !important;
  }
  .icloud {
    grid-area: 8/1/9/-1;
    padding-block: 30px;
  }
  .experience {
    grid-area: 9/1/10/-1;
    padding-block: 40px;
    margin: 0;
  }
  .tv {
    grid-area: 10/1/11/-1;
  }
  .tv h3 {
    width: 50%;
  }
  .tv__image {
    width: 40%;
    translate: -40px -15px;
  }
}
/******* md (tablets) *******/
@media (min-width: 641px) and (max-width: 992px) {
  .grid {
    grid-template-areas: none;
  }
  .chemicalLabs {
    grid-area: 1/1/2/-1;
    padding-block: 50px;
  }
  .iphone6 {
    grid-area: 2/1/3/-1;
  }
  .keyboard {
    grid-area: 3/1/4/7;
    padding: 50px;
  }
  .controller {
    padding: 50px;
    grid-area: 3/7/4/-1;
  }
  .imac {
    grid-area: 4/1/5/-1;
  }
  .twitter {
    grid-area: 5/1/6/7;
  }
  .ipad {
    grid-area: 6/1/7/7;
  }
  .ipad__image {
    translate: -50px 30px;
  }
  .ipad__backword {
    font-size: 1550% !important;
    bottom: -80px !important;
    right: 10px !important;
  }
  .icloud {
    grid-area: 5/7/7/-1;
    padding-block: 30px;
  }
  .experience {
    grid-area: 7/1/8/-1;
    padding-block: 70px;
    margin: 0;
  }
  .tv {
    grid-area: 8/1/9/-1;
  }
}
@media (max-width: 1400px) {
  .ipad__backword {
    bottom: -120px;
    right: 30px;
    opacity: 0.5;
    font-size: 2300%;

  }
}
