:root {
   --unit: 14px;
   
}

@media (max-width: 960px) {
   :root {
      --unit: 12px;
   }
}

@media (max-width: 480px) {
   :root {
      --unit: 10px;
   }
}

.grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-column-gap: var(--unit);
	grid-row-gap: var(--unit);
	align-items: start;
}

.grid > .grid {
	display: grid;
	grid-template-columns: subgrid;
}

.container {
	display: contents;
}

.baseline {
	align-self: baseline;
}

.col-1 {
	grid-column: span 1;
}

.col-2 {
	grid-column: span 2;
}

.col-3 {
	grid-column: span 3;
}

.col-4 {
	grid-column: span 4;
}

.col-5 {
	grid-column: span 5;
}

.col-6 {
	grid-column: span 6;
}

.col-7 {
	grid-column: span 7;
}

.col-8 {
	grid-column: span 8;
}

.mb-1 {
   margin-bottom: var(--unit);
}

.mb-2 {
   margin-bottom: calc(var(--unit)*2);
}

@media (max-width: 780px) {
   .grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

@media (max-width: 480px) {
   .grid {
      grid-template-columns: repeat(2, 1fr);
   }
}