.clafi {
  position: relative;
  top: 5%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  row-gap: 5px;
  column-gap: 5px;
  grid-template-areas:
    "c1 c2 c3 c4"
    "c5 c6 c7 c8"
    "c9 c10 c11 c12";
}

@media (max-width: 1200px) {
  .clafi {
      grid-template-columns:auto; 
      row-gap: 5px;
      column-gap: 5px;
      grid-template-rows: auto;
    grid-template-areas:
    "c1 c2 c3"
    "c4 c5 c6"
    "c7 c8 c9"
    "c10 c11 c12";
  }
}

@media (max-width: 700px) {
  .clafi {
      grid-template-columns:auto; 
      row-gap: 5px;
      column-gap: 5px;
      grid-template-rows: auto;
    grid-template-areas:
    "c1 c2"
    "c3 c4"
    "c5 c6"
    "c7 c8"
    "c9 c10"
    "c11 c12";
  }
}

.clafic1 { grid-area: c1; height:200px; width:200px; display: inline-block;}
.clafic2 { grid-area: c2; height:200px; width:200px; display: inline-block;}
.clafic3 { grid-area: c3; height:200px; width:200px; display: inline-block;}
.clafic4 { grid-area: c4; height:200px; width:200px; display: inline-block;}
.clafic5 { grid-area: c5; height:200px; width:200px; display: inline-block;}
.clafic6 { grid-area: c6; height:200px; width:200px; display: inline-block;}
.clafic7 { grid-area: c7; height:200px; width:200px; display: inline-block;}
.clafic8 { grid-area: c8; height:200px; width:200px; display: inline-block;}
.clafic9 { grid-area: c9; height:200px; width:200px; display: inline-block;}
.clafic10 { grid-area: c10; height:200px; width:200px; display: inline-block;}
.clafic11 { grid-area: c11; height:200px; width:200px; display: inline-block;}
.clafic12 { grid-area: c12; height:200px; width:200px; display: inline-block;}