.clafi {
  position: relative;
  left: 8%;
  top: 5%;
  display: grid;
  row-gap: 3%;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas:
  "c1 c2 c3"
  "c4 c5 c6";
}


@media (max-width: 700px) {
  .clafi {
      grid-template-columns:auto; 
      grid-template-rows: auto;
    grid-template-areas:
    "c1 c2"
    "c3 c4"
    "c5 c6";
  }
}


.title-area { grid-area: textarea;}
.clafic1 { grid-area: c1; height:225px; width:225px;}
.clafic2 { grid-area: c2; height:225px; width:225px;}
.clafic3 { grid-area: c3; height:225px; width:225px;}
.clafic4 { grid-area: c4; height:225px; width:225px;}
.clafic5 { grid-area: c5; height:225px; width:225px;}
.clafic6 { grid-area: c6; height:225px; width:225px;}