.installgrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-auto-rows: auto;
  grid-template-areas:
  "mainservice mainservice service1 service1"
  "service2 service2 service3 service8"
  "service7 service7 service7 service7"
  "service6 service6 service4 service5";
  grid-row-gap:5px;
  grid-column-gap:5px;
  margin:5px;
  letter-spacing:1px;
}

.mainservice {
  display:grid;
  grid-area:mainservice;
  background-color: rgba(255, 255, 255, 0.5);
  border:2px solid #000;
  font-size:1em;
  line-height:1.5em;
  padding:5px;
  color:#000000;
  letter-spacing: 2px;
}

.service1{
    grid-area:service1;
}
.service2{
    grid-area:service2;
}
.service3{
    grid-area:service3;
}
.service4{
    grid-area:service4;
}
.service5{
    grid-area:service5;
}
.service6{
    grid-area:service6;
}
.service7{
    grid-area:service7;
}
.service8{
    grid-area:service8;
}
.service1, .service2, .service3, .service4, .service5, .service6, .service7, .service8 {
  display:grid;
  background: rgba(0, 0, 0, 0.6);
  border:2px solid #000;
  padding: 5px;
  color:#FFFFFF;
  text-align: justify;
}

@media screen and (max-width: 1280px)
{
  .installgrid {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "mainservice"
    "service1"
    "service2"
    "service6"
    "service3"
    "service4"
    "service5"
    "service7"
    "service8";
  }
  .image1 {
    display:none;
  }
  .service1, .service2, .service3, .service4,.service5, .service6, .service7, .services8
{
  text-align:left;
}
}