.an-images-slider-container {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	height: calc(50vw + 50px);
	max-height: 637px; /* 587 + 50px */
	display: block;
	object-fit: cover;
}

html.js .an-images-slider-container {
	overflow: auto;
	scrollbar-color: transparent transparent;
	scrollbar-width: none;
}

.an-images-slider-container .an-slider-overflow-container {
	width: 100%;
	height: 50vw;
	max-height: 587px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.an-images-slider-image {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
/*	height: 100%; */
	width: 100%;
	scroll-snap-align: center;
	margin: 0;
}

.an-images-slider-image img {
	max-height: 80vh;
	object-fit: cover;
	/* This 1px margin prevents a slither of adjacent image showing on high-res displays.
	 * Without it, some browsers mis-calculate sub-pixel values, which just looks bad.
	 */
	width: calc(100% - 2px);
	margin: 0 1px;
}

.image-credit {
	opacity: 0.7;
	position: absolute;
	bottom: 0;
	left: 0;
	color: #000;
	font-size: 12px;
	padding: 5px 10px;
	display: inline-block;
	z-index: 1024;
	transition: 0.3s;

	text-shadow:
		1px 1px 2px #fff,
		-1px 1px 2px #fff,
		1px -1px 2px #fff,
		-1px -1px 2px #fff,
		0px 1px 2px #fff,
		0px -1px 2px #fff,
		-1px 0px 2px #fff,
		1px 0px 2px #fff,

		2px 2px 2px #fff,
		-2px 2px 2px #fff,
		2px -2px 2px #fff,
		-2px -2px 2px #fff,
		0px 2px 2px #fff,
		0px -2px 2px #fff,
		-2px 0px 2px #fff,
		2px 0px 2px #fff;

}

.image-credit:hover {
	opacity: 1;
}

.image-credit a {
	color: #000;
}

/* Hide this by default, themes can over-ride this of course */
.an-images-slider-container figcaption.has-caption.wp-caption-field {
	display: none;
}



@media screen and (max-width: 999px) {

	.an-images-slider-container {
		height: calc(100vw + 50px);
		max-height: none;
	}

	.an-images-slider-container .an-slider-overflow-container {
		height: 100vw;
		max-height: none;
	}

	.an-images-slider-image img {
		height: 100vw;
		max-height: none;
	}

	.an-images-slider-container .an-slider-arrow {
		min-width: 42px;
	}

	.an-slider-arrow::after {
		width: 42px;
		height: 42px;
		top: calc(50% - 21px);
	}

}