.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 1.3rem;
	position: relative;
	width: 100%;
	//max-width: 1024px;
	padding: 1rem 0 2rem 0; }

.card       { position: relative; transition: 0.3s ease-out;  }
.card:hover { transform: translateY(-0.5rem); }

.card img {
	border: 1px solid #ccc;
	box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
	border-radius: 5px;
	max-width: 100%; }

.card:hover img { filter: grayscale(100%); opacity: 0.5 }

.card-head, 
.card-info, 
.card-detail small { position: absolute; }

/* ============= Overlay ============= */
.card-overlay small, .card-overlay small a  { 
	font-size: 0.65rem; 
	font-weight: 600; 
	text-transform: uppercase; }

.card-overlay {
	width: 100%;
	height: 100%;
	color: var(--gray_d);
	position: absolute; 
	top: 0;
	left: 0;
	opacity: 0;
	padding: 0.8rem;
	border-radius: 5px;
	background: rgb(255, 255, 255,0.75);
	transition: opacity 0.5s, background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
	display: flex;
	flex-flow: column;
	justify-content: space-around; }

.card-overlay:hover { opacity: 1; border: 1px solid #ccc; }

/* ============= Opdracht Header ============= */
.card-head {
	top: 1.3rem;
	transition: top 1.5s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1); }

.card-head h2      { font: normal 400 0.8rem 'Quicksand', sans-serif; text-transform: initial; }
.card-head h2 + h2 { font-weight: 300; font-style: italic; font-size: 0.7rem; color: #b42f1e; }

.card:hover .card-head   { top: 0.6rem; } /*naar boven*/

.card-head.test { font-size: 0.8rem;  top: 3rem; }
.card:hover .card-head.test { top: 2rem; }

.card-head.test small { font-size: 0.7rem; }

/* ============= Opdracht Info ============= */
.card-info { 
	top: 2.8rem; 
	transition: top 1.5s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
	align-self: flex-end;
	text-align: right; }

.card-info p  { 
	font-size: 0.8rem; 
	font-weight: 300; 
	line-height: 1.3; 
	padding: 0; }

.card:hover .card-info { top: 3.3rem; } /*naar beneden*/


/* ============= Opdracht Technieken ============= */
.card-detail { 
	bottom: 0.5rem; 
	transition: left 1s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1); }

.card-detail small a       { color: var(--gray_d) }
.card-detail small a:hover { color: var(--rood); }

.card-detail small               { bottom: 0.5rem; opacity: 0; }
.card-detail small:first-of-type { left: 0rem; }
.card-detail > small + small     { right: 0rem;  }

.card:hover .card-detail small {opacity: 1; }
.card:hover .card-detail small:first-of-type { 
	left: 1rem; transition: left 1s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);} /*van links naar rechts*/
.card:hover .card-detail > small + small { 
	right: 1rem; transition: right 1s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);} /*van links naar rechts*/