@media screen and (min-width: 500px) {
  .section {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
    grid-template-areas:
      "header header"
      "mobile mobile"
      "keyboard cont"
      "tv tv"
      "x icloud"
      "lab icloud"
      "ex ex"
      "sec-tv sec-tv";
  }
  .header {
    grid-area: header;
  }
  .mobile {
    grid-area: mobile;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .mobile-l {
    padding-left: 40px;
    width: 50%;
  }
  .mobile-r img {
    width: 70%;
    
  }
  .mobile-r {
    width: 50%;
  }
  .keyboard {
    grid-area: keyboard;
  }
  .cont {
    grid-area: cont;
  }
  .tv {
    grid-area: tv;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  
  .tv-l {
    
    width: 50%;
  }
  .tv-r {
    width: 50%;
    
  }
  .tv-r img {
    width:100%;
    
  }
  .x {
    grid-area: x;
  }
  .icloud {
    grid-area: icloud;
    overflow: hidden;
  }
  .icloud .circle {
    width: 50%;
    aspect-ratio: 1/1;
  }
  .lab {
    grid-area: lab;
  }
  .lab .con{
    padding-left: 10px;
  }

  .ex {
    grid-area: ex;
  }
  .sec-tv {
    grid-area: sec-tv;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .sec-tv img {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .section {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
    grid-template-areas:
      "mobile mobile mobile mobile mobile mobile header header header header header header"
      "keyboard keyboard keyboard tv tv tv tv tv tv icloud icloud icloud"
      "cont cont cont lab lab lab lab lab lab icloud  icloud icloud"
      "x x x ex ex ex sec-tv sec-tv sec-tv sec-tv sec-tv sec-tv";
  }
  .mobile {
    grid-area: mobile;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
  }

  .mobile-l {
    padding-left: 40px;
    width: 50%;
  }
  .mobile-r img {
    width: 70%;
    
  }
  .mobile-r {
    width: 50%;
  }
  .header {
    grid-area: header;
  }
  .keyboard {
    grid-area: keyboard;
  }
  .tv {
    grid-area: tv;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  
  .tv-l {
    
    width: 50%;
  }
  .tv-r {
    width: 50%;
  }
  .tv-r img {
    width:100%;
    
  }
  .icloud {
    grid-area: icloud;
    overflow: hidden;
  }
  .icloud .circle {
    width: 20%;
    aspect-ratio: 1/1;
  }
  .cont {
    grid-area: cont;
  }
  .lab {
    grid-area: lab;

  }
 
  .x {
    grid-area: x;
  }
  .ex {
    grid-area: ex;
  }
  .sec-tv {
    grid-area: sec-tv;
  }
}

@media screen and (min-width: 922px) {
  .section {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
    grid-template-areas:
      "mobile mobile mobile mobile mobile mobile header header header header header header"
      "keyboard keyboard keyboard tv tv tv tv tv tv icloud icloud icloud"
      "cont cont cont lab lab lab lab lab lab icloud icloud icloud"
      "x x x ex ex ex sec-tv sec-tv sec-tv sec-tv sec-tv sec-tv";
  }
  .mobile {
    grid-area: mobile;

  }
  .header {
    grid-area: header;
  }

  .keyboard {
    grid-area: keyboard;
  }
  .tv {
    grid-area: tv;
  }
  .icloud {
    grid-area: icloud;
    overflow: hidden;
  }
  .icloud .circle {
    width: 20%;
    aspect-ratio: 1/1;
  }
  .cont {
    grid-area: cont;
  }
  .lab {
    grid-area: lab;
  }
  .lab .img-two{
    margin-right: 100px;
  }
  .x {
    grid-area: x;
  }
  .ex {
    grid-area: ex;
  }
  .ex h2 {
    width: 100%;
  }
  .sec-tv {
    grid-area: sec-tv;
  }
}