/*
.section.showcase-section {
	.showcase-wrapper {
		.showcase-header {
			h1.heading.heading-showcase {}
			h2.heading.heading-showcase {}
			h3.heading.heading-showcase {}
			p.showcase-introduction {}
		}
	}
	.showcase-items {
		.showcase-item {
			.showcase-item a {
				.showcase-item a .showcase-image => .showcase-item-image {}
			}
			.showcase-item-caption-wrapper {
				.showcase-caption => showcase-item-caption {}
			}
		}
	}
}
*/

.section.section-showcase {}

.section-showcase {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	overflow: hidden;
	justify-content: space-between;
	margin-bottom: 6rem;
	padding: 1.5rem;
}

/* ============ .showcase-wrapper HAS 2 CHILDREN: .showcase-header + .showcase-items ============ */
.showcase-wrapper {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
}

.showcase-header { width: 100%; }
h1.heading.heading-showcase {}
h2.heading.heading-showcase {}
h3.heading.heading-showcase {}
p.showcase-introduction {}

.showcase-items { /*	border: 3px dashed gold; */ }

.showcase-item {
	/* flex, justify here allow for vertical centering of the caption if bottom is omitted from the caption rule */
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	position: relative;
	margin-bottom: .9rem;
	border: 1px solid transparent;
}

.showcase-item-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
}

.showcase-item-caption-wrapper {
	position: absolute;
	bottom: 0;
	opacity: 1;
	width: 100%;
	/*	background: rgba(0, 0, 0, .6); */
	/*	background: rgba(120, 120, 120, .6); */
	background: rgba(0, 0, 0, .33);
	transition: all .3s ease-in-out;
}

.showcase-item-caption {
	width: 100%;
	padding: .45ch .9ch;
	font-size: 1.11rem;
	text-align: center;
}

.showcase-item-caption a { display: block; /* [customer].css: color, font-weight, etc. */ }

/*
	normally we should not include media query rules in shared css because, theoretically,
	breakpoints would vary per customer content. However, in the case of the 'showcase' component,
	we'll ensure that customers who opt in provide assets according to some constraints,
	e.g., consistent image size and aspect-ratio
*/

@media screen and (min-width: 600px) {
	.showcase-items {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1.5rem;
	}
	.showcase-item { margin: 0; }

	.showcase-item:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	/* DEMO ONLY; !unsustainable, !dynamic; would require explicit rules re: number of elements, which are 'prime' */
	.showcase-item:nth-child(6) {
		grid-column: 1 / 3;
		grid-row: 3 / 5;
	}
}

@media screen and (min-width: 900px) {
	.showcase-items { grid-template-columns: repeat(4, 1fr); }

	.showcase-item { transition: box-shadow .3s ease-in-out; }

	.showcase-item:hover {
		transition: box-shadow .3s ease-in-out;
		box-shadow: 1px 1px 9px rgba(120, 120, 120, .3), -1px -1px 9px rgba(120, 120, 120, .3);
		border: 1px solid #dedede;
	}


	.showcase-item-caption-wrapper {
		transition: all .3s ease-in-out;
		opacity: 0;
	}

	.showcase-item:hover .showcase-item-caption-wrapper { opacity: 1; }

} /* MQ */