<section>
  <div id='toolKitList'>
  <a class='block ' id='block-a'>
    <figure>
      <img src='https://image.flaticon.com/icons/svg/628/628283.svg'/>
    </figure>
    <div class='toolKit__title'>PLANT 1</div>
  </a>
    <a class='block block-b' id='block-b1'>
    <figure>
      <img src='https://image.flaticon.com/icons/svg/628/628277.svg'/>
    </figure>
    <div class='toolKit__title'>PLANT 2</div>
  </a>
  <a class='block block-b' id='block-b2'>
    <figure>
      <img src='https://image.flaticon.com/icons/svg/628/628278.svg'/>
    </figure>
    <div class='toolKit__title'>PLANT 3</div>
  </a>
  <a class='block block-b' id='block-b3'>
    <figure>
      <img src='https://image.flaticon.com/icons/png/512/628/628280.png'/>
    </figure>
    <div class='toolKit__title'>PLANT 4</div>
  </a>
  <a class='block block-b' id='block-b4'>
    <figure>
      <img src='https://image.flaticon.com/icons/png/512/628/628276.png'/>
    </figure>
    <div class='toolKit__title'>PLANT 5</div>
  </a>
  
    <a class='block block-c'>
    <figure>
      <img src='https://image.flaticon.com/icons/png/512/628/628275.png'/>
    </figure>
    <div class='toolKit__title'>PLANT 6</div>
  </a>
  <a class='block block-c'>
    <figure>
      <img src='https://image.flaticon.com/icons/svg/628/628281.svg'/>
    </figure>
    <div class='toolKit__title'>PLANT 7</div>
  </a>
  <a class='block block-c'>
    <figure>
      <img src='https://image.flaticon.com/icons/svg/628/628282.svg'/>
    </figure>
    <div class='toolKit__title'>PLANT 8</div>
  </a>
  <a class='block block-c'>
    <figure>
      <img src='https://image.flaticon.com/icons/svg/628/628279.svg'/>
    </figure>
    <div class='toolKit__title'>PLANT 9</div>
  </a>
</div>
</section>

$blockWidth: 100px;
$blockHeight: 300px;
$blockMargin: 0px ;
$viewpoint1: 430px;
$viewpoint2: 648px;
$viewpoint3:861px;

  
    img{
      width:100%;
    }
  

section{
  text-align:center;
    background-color:lightblue;
}

#toolKitList{
  // max-width:600px;
  margin:0 auto;
  padding:20px 10px;
  min-width:270px;
  display:grid;
  grid-gap:12px;

  grid-template-columns: repeat(2,1fr);
  // grid-template-rows:auto;
  grid-auto-rows: $blockHeight;
  @media(min-width:$viewpoint2){
    max-width:650px;
    grid-template-columns: repeat(3,200px);
  }
  @media (min-width: $viewpoint3){
      max-width:860px;
    grid-template-columns: repeat(4,200px);
  }
}
.block{
  background-color: lightyellow;
  width:100%;
  display:block;
}
.toolKit__title{
//  text-align:left;
  padding:20px 10px;
}
#block-a{
  grid-column: 1/ span 2;
  grid-row: 1 / span 2;
  figure{
    max-width: 420px;
  
  }
}
.block-b,.block-c{
  figure{
    max-width:200px;
  }
}
#block-b1{
  @media (min-width: $viewpoint3){
  grid-column:3/span 1;
  grid-row:1 / span 1;}
  
}
#block-b2{
  @media (min-width: $viewpoint3){  
    grid-column:4/span 1;
  grid-row:1 / span 1;}

}
#block-b3{
  @media (min-width: $viewpoint3){
  grid-column: 3/span 1;
    grid-row: 2 / span 1;}
}
#block-b4{
  @media (min-width: $viewpoint3){
  grid-column: 4/span 1;
    grid-row: 2 / span 1;}
}