div#showcase {
	--showcase-text: #000;
	--showcase-block-background: #fff;
	--showcase-block-overlay: rgba(255,255,255,0.9);
	--portfolio-link: #000;
}

.night div#showcase {
	--showcase-text: #fff;
	--showcase-block-background: #000;
	--showcase-block-overlay: rgba(0,0,0,0.9);
	--portfolio-link: #fff;
}

div#showcase {
	margin: 15vh auto;
	text-align: center;
	color: var(--showcase-text);
}

div#showcase a.showcase_block {
	/* display: inline-block; */
  /* height: 16.66vw; */
	/* width: 25vw; */
	/* margin: 0 2.5vw; */
	/* color: #57585c; */
	color: var(--showcase-text);
	text-align: left;
	line-height: 1.2em;
	/* border: 1px solid transparent; */
	border-radius: 0.5em;
	overflow: hidden;
	-webkit-transition: border 0.35s;
	transition: border 0.35s;
}
div#showcase a.showcase_block.no_title:hover {
	/* border: 1px solid #000; */
}

div#showcase .showcase_text_container, div#showcase .showcase_answer_container {
  height: 100%;
  /* padding: 1em; */
	/* border: 1em solid #fff; */
	border: 1em solid transparent;
  text-overflow: ellipsis;
  background: var(--showcase-block-background);
	overflow: hidden;
}

div#showcase .showcase_answer_container .showcase_question {
  padding: 0.5em;
  background: #fafafa;
  font-size: 0.8em;
  line-height: 1.25em;
}
div#showcase .showcase_answer_container div:nth-child(2) {
	margin-top: 0.35em;
}

div#showcase div#showcase_portfolio {
	margin-top: 3vh;
	/* font-size: 1.5vw; */
	/* font-size: 1.5em; */
}
div#showcase div#showcase_portfolio a {
	color: var(--portfolio-link);
	/* font-variant: small-caps; */
	text-transform: uppercase;
	letter-spacing: 2px;
}
div#showcase div#showcase_portfolio a:hover {
	color: var(--accent-hsl);
}

@media screen and (max-width: 600px) {
	div#showcase div#showcase_title {
		font-size: 1.35em;
	}
	div#showcase a.showcase_block {
		display: block;
		width: 90%;
		margin: 2em auto;
	}
	div#showcase .showcase_info {
		margin-top: 1em;
		text-align: center;
	}
	div#showcase a.showcase_block b {
		color: var(--accent-hsl);
	}
	div#showcase span.showcase_date {
		display: none;
	}
}

@media screen and (min-width: 600px) {
	div#showcase div#showcase_title {
		margin-bottom: 3vh;
		font-size: 2vw;
		/* text-align: left; */
	}

	div#showcase a.showcase_block {
		display: inline-block;
	  height: 16.66vw;
		width: 25vw;
		margin: 0 2.5vw;
	}

	div#showcase .showcase_info {
		display: grid;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 2vw;
		background: var(--showcase-block-background);
		/* background: rgba(255,255,255,0.8); */
		background: var(--showcase-block-overlay);
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: end;
		opacity: 0;
		-webkit-transition: opacity 0.35s;
		transition: opacity 0.35s;
		z-index: 1;
	}
	div#showcase a.showcase_block.no_title .showcase_info {
		padding: 0;
		border: 2vw solid transparent;
		overflow: hidden;
	}
	div#showcase a.showcase_block.showcase_regular .showcase_info, div#showcase a.showcase_block.showcase_answer .showcase_info {
		/* background: rgba(255,255,255,0.9); */
	}
	div#showcase a.showcase_block:hover .showcase_info {
		opacity: 1;
	}

	div#showcase .showcase_info span {
		display: block;
		left: -2vw;
		opacity: 0;
		-webkit-transition-duration: 0.35s;
		transition-duration: 0.35s;
		-webkit-transition-property: opacity, left;
		transition-property: opacity, left;
	}
	div#showcase .showcase_info .showcase_date {
		/* margin-top: 0.75em; */
		margin-top: 1em;
		color: var(--accent-hsl);
		font-size: 0.75em;
		line-height: 1em;
	}
	div#showcase a.showcase_block:hover .showcase_info span {
		left: 0;
		opacity: 1;
	}
	div#showcase .showcase_info span:not(:last-child) {
		margin-bottom: 0.2em;
	}
	div#showcase a.showcase_block:hover .showcase_info span:first-child {
		-webkit-transition-delay: 0.35s;
		transition-delay: 0.35s;
	}
	div#showcase a.showcase_block:hover .showcase_info span:nth-child(2) {
		-webkit-transition-delay: 0.5s;
		transition-delay: 0.5s;
	}
	div#showcase a.showcase_block:hover .showcase_info span:nth-child(3) {
		-webkit-transition-delay: 0.65s;
		transition-delay: 0.65s;
	}
}