.grid-team {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, 12.5%);
	column-gap: 1.5%;
	row-gap: 1rem;
	font-size: var(--font-size-small);
	.portrait { margin-bottom: 0.5rem; }
	.caption > * { display: block; line-height: normal; }
	.caption span { font-size:var(--font-size-small)}
}

.company-history {
	.grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 10%;
		row-gap: 5%;
	}
	.well {
		position: relative;
		box-shadow: var(--base-box-shadow);
		padding: 2rem 1.5rem;
		background: white;
	}
	article {
		margin: 3rem 0;
		
		.yr { font-size: var(--font-size-small); margin-bottom: 1rem; }
		p { margin: 0; }
	}
	
}


@media(min-width:768px) {
.company-history {
	position: relative;
	.grid {
		margin-bottom: 10%;
	}
	.grid, article .well {
		position: relative;
	}
	article:nth-child(even) {
		.well span.beam {
			left: unset;
			right: 100%;
		}
	}
	article:nth-child(2) {
		margin-top: 50%;
	}
	article:not(:first-child):nth-child(odd) {
		margin-top: calc(-50% + 5rem);
	}
	.rail {
		position:absolute;
		width:7px;
		z-index: 10;
		background:#d3d3d3;
		box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2);
		top: 0;
		height: 0;
		left: calc(50% - 3px);
		transition: height 1s;
	}

	article span.beam {
		content: '';
		position: absolute;
		height: 7px;
		width:10.41%;
		background:#d3d3d3;
		left: 100%;
		top: calc(50% - 3px);
		box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2);
		/*transform: translateY(-50%);*/
	}
	article span.beam:after {
		content: '';
		background: var(--primary-color);
		position: absolute;
		top: 0;
		height: 100%;
		left: auto;
		right: 0;
		width: 0;
		transition: width 0.5s ease-out 380ms;
	}
	article:nth-child(even) span.beam:after {
		left: 0;
		right: auto;
	}
	article.loaded span.beam:after {
		width: 100%;
	}
	.rail > span {
		position: absolute;
		background: var(--primary-color);
		display: block;
		margin-left:auto;
		margin-right:auto;
		width: 100%;
		top: 0;
		height: 0;
		transition: height 0.5s ease-in-out;
	}
	}
	
}
@media(max-width:991px) {
	.grid-team {
		grid-template-columns: repeat(auto-fill, 15%) !important;
		column-gap: 2%;
	}
	section.company-history{
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	.company-history .grid {
		column-gap: 5%;
		article span.beam { width: 4.4% }
	}
}
@media(max-width:767px) {
	div.grid-team {
		grid-template-columns: 1fr 1fr 1fr !important;
		column-gap: 1%;
	}
	section.company-history {
		padding-left: 0 !important;
		padding-right: 0 !important;
		.grid {
			row-gap: 1rem;
		}
		.rail, .beam { display: none;}
		article { margin: 0 !important; }
	}
}
@media(min-width:768px) {
    .css-col-2 p { display: inline-block;}
}