/* img{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
} */

img{
  width:170px;
  height:100px;
  border: 2px solid BlueViolet;
}

.container{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto,10);

}
.g1p, .s1p, .p1p{
  border: 2px solid #50C7C7;
  border-radius: 15px;
  padding: 5px;
  background-color:  #50C7C7;
}
.g1i,.s1i,.p1i{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
img{
  flex-grow: 1;
}
.w1,.w2,.w3{
  flex-grow: 2;
}
@media all and (min-width:800px){
  .container{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30px repeat(500px,10);
    grid-gap: 5px;
  }
  h1{
    grid-column: 1/-1;
  }

  .g1t{
    margin:auto;
    grid-column: 1/span 1;
    grid-row: 2/span 2;
  }
  .g1p{
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .g1i{
    grid-column: 2/span 1;
    grid-row: 3/span 1;

  }

  .s1t{
    margin:auto;
    grid-column: 1/span 1;
    grid-row: 4/span 2;
  }
  .s1p{
    justify-content: center;
    grid-column: 2/span 1;
    grid-row: 4/span 1;
  }
  .s1i{
    grid-column: 2/span 1;
    grid-row: 5/span 1;

  }

  .p1t{
    margin:auto;
    grid-column: 1/span 1;
    grid-row: 6/span 2;
  }
  .p1p{
    justify-content: center;
    grid-column: 2/span 1;
    grid-row: 6/span 1;
  }
  .p1i{
    grid-column: 2/span 1;
    grid-row: 7/span 1;

  }
}


@media all and (min-width:1024px){
  .container{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30px 30px repeat(500px,10);
    grid-gap: 5px;
  }
  h1{
    grid-column: 1/-1;
  }

  .g1t{
    margin:auto;
    grid-column: 1/-1;
    grid-row: 2/span 1;
  }
  .g1p{
    grid-column: 1/span 1;
    grid-row: 3/span 1;
  }
  .g1i{
    grid-column: 2/span 1;
    grid-row: 3/span 1;

  }

  .s1t{
    margin:auto;
    grid-column: 1/-1;
    grid-row: 4/span 1;
  }
  .s1p{
    justify-content: center;
    grid-column: 2/span 1;
    grid-row: 5/span 1;
  }
  .s1i{
    grid-column: 1/span 1;
    grid-row: 5/span 1;

  }

  .p1t{
    margin:auto;
    grid-column: 1/-1;
    grid-row: 6/span 1;
  }
  .p1p{
    justify-content: center;
    grid-column: 1/span 1;
    grid-row: 7/span 1;
  }
  .p1i{
    grid-column: 2/span 1;
    grid-row: 7/span 1;

  }
}