/* ==========================================================================
   Header slideshow
   - Full screen width, from phones to desktops (always 100% of the screen).
   - Fixed height: the box is always 200px tall.
   - Photos are sized by that height (height: 200px, width auto) and
     centered horizontally, keeping their own proportions — never stretched,
     but a photo wider than the container will have its sides cropped.
   - Slides are cross-faded automatically, forever, in an endless loop.
   ========================================================================== */

.art-slideshow {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: #FAE6C7;
	z-index: 1;
}

.art-slideshow-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.2s ease-in-out;
	-webkit-transition: opacity 1.2s ease-in-out;
}

.art-slideshow-slide.active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.art-slideshow-slide img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	/* Positioned by the container's height: each photo is scaled to fill
	   the 200px height and centered horizontally by the flexbox above. */
}