.careersText {
	margin: 30px auto;
}
.careersText h2 {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-family: var(--fontText);
	color: var(--colorDark);
}
.careersText p {
	text-indent: 20px;
	margin: 20px 0;
}
.careers {
	display: grid;
	grid-template-columns: repeat(auto-fit, 300px);
	grid-gap: 20px;
	justify-content: space-around;
	margin: 30px auto;
}
.career {
	display: grid;
	grid-template-columns: 1fr 20fr;
	grid-template-rows: 5fr 1fr;
	justify-items: start;
	align-items: center;

	opacity: 0;
	transform: translateY(2em) scale(0.5);
	transition: transform 2s .25s cubic-bezier(0,1,.3,1),
							opacity .3s .25s ease-out;
	will-change: transform, opacity;
}
.career.is-visible {
  opacity: 1;
  transform: scale(1);
}
.careerImg {
	width: 300px;
	height: 370px;
	box-shadow: 0 0 3px rgba(0,0,0,.5);
	border-radius: 2px;
	grid-column: 1/3;
	grid-row: 1/3;
}
.career > a {
	grid-column: 2/3;
	grid-row: 2/3;
	color: var(--colorDark);
	background-color: var(--colorLight);
	padding: 10px;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
	border-radius: 2px;
	z-index: 3;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}
.career > a:hover {
	color: var(--colorLight);
	background-color: var(--colorDark);
}