.servicegrid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(0.3fr, 1fr));
  grid-auto-rows: auto;
  grid-template-areas:
  "mainservice mainservice service8 service8"
  "service2 service4 service5 service6"
  "service3 service3 service13 service13"
  "service7 service12 service9 service10"
  "service11 service11 service1 service1";
  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;
}
.service9{
    grid-area:service9;
}
.service10{
    grid-area:service10;
}
.service11{
    grid-area:service11;
}
.service12{
    grid-area:service12;
}
.service13{
    grid-area:service13;
}
.service1, .service2, .service3, .service4, .service5, .service6, .service7, .service8, .service9, .service10, .service11, .service12, .service13 {
  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)
{
  .servicegrid {
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-template-areas:
    "mainservice"
    "service8"
    "service1"
    "service2"
    "service3"
    "service4"
    "service5"
    "service6"
    "service7"
    "service12"
    "service9"
    "service10"
    "service11"
    "service13";
  }
  .image1 {
    display:none;
  }
  .service1, .service2, .service3, .service4,.service5, .service6, .service7, .service8, .service9, .service10, .service11, .service12, .service13
{
  text-align:left;
}
}