<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;}
}