/* grid: 130 + 20 */	
:root {
  --c1: 130px;
  --c2: 280px;
  --c3: 430px;
  --c4: 580px;
  --c5: 730px;
  --c6: 880px;
  --c7: 1030px;
  
  --m1: 110px;
  --m2: 260px;
  --m3: 310px;
  
  --offset: 170px;
  --grid: 300px;
  
}

/* grid: 130 + 20 */	
:root {
  --col: 40px;
  --gap: 10px;
  
  --unit: calc(var(--col) + var(--gap));
  
  --offset: calc(var(--unit) + var(--gap));
  
  --c1: calc(var(--col) * 1);
  --c2: calc(var(--unit) * 2 - var(--gap));
  --c3: calc(var(--unit) * 3 - var(--gap));
  --c4: calc(var(--unit) * 4 - var(--gap));
  --c5: calc(var(--unit) * 5 - var(--gap));
  --c6: calc(var(--unit) * 6 - var(--gap));
  --c7: calc(var(--unit) * 7 - var(--gap));
  
//  --m1: 110px;
//  --m2: 260px;
//  --m3: 410px;
  
  --m1: calc(var(--col) - var(--gap));
  --m2: calc((var(--unit) * 2) - (var(--gap) * 2));
  --m3: calc((var(--unit) * 3) - (var(--gap) * 2));
/*
  --m3: calc((var(--unit) * 3) - (var(--gap) * 2)));
*/  
//  --t1: 130px;
//  --t2: 280px;
//  --t3: 300px;
  
  --grid: calc(var(--unit) * 2);
  
}
@media screen and (min-width: 36em) {
	
	:root {
	  --col: 50px;
  	  
	}
}
@media screen and (min-width: 48em) {
	
	:root {
	  --col: 60px;
	  --gap: 20px;
	}
}
@media screen and (min-width: 90em) {
	
	:root {
	  --col: 100px;	
	}
}
@media screen and (min-width: 120em) {
	
	:root {
	  --col: 130px;	
	}
}

/* grid: 100 + 20 */	
//:root {
//  --c1: 100px;
//  --c2: 220px;
//  --c3: 340px;
//  --c4: 460px;
//  --c5: 580px;
//  --c6: 700px;
//  --c7: 820px;
//  
//  --m1: 80px;
//  --m2: 200px;
//  --m3: 250px;
//  --t1: 100px;
//  --t2: 220px;
//  --t3: 270px;
//  
//  --offset: 140px;
//  --grid: 240px;
//  
//}

/* grid: 80 + 20 */
//:root {
//  --c1: 80px;
//  --c2: 180px;
//  --c3: 280px;
//  --c4: 380px;
//  --c5: 480px;
//  --c6: 580px;
//  --c7: 680px;
//  
//  --m1: 60px;
//  --m2: 160px;
//  --m3: 210px;
//  --t1: 80px;
//  --t2: 180px;
//  --t3: 230px;
//  
//  --offset: 130px;
//  --grid: 200px;
//  
//}