/* ========================================
   INDEX PAGE STYLES
   ======================================== */

.image-showcase {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 20px;
	flex-wrap: wrap;
	max-width: 100%;
}

.showcase-image {
	max-width: calc(33.333% - 20px);
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity 0.5s ease-in-out;
}

.showcase-image.fading {
	opacity: 0;
}

@media (max-width: 1024px) {
	.image-showcase {
		flex-direction: column;
	}
	
	.showcase-image {
		max-width: 90%;
		max-height: 50vh;
	}
}

@media (orientation: portrait) {
	.image-showcase {
		flex-direction: column;
	}
	
	.showcase-image {
		max-width: 90%;
		max-height: 30vh;
	}
}