/*
 * Veteran photo drum carousel
 *
 * .drum-item's width (and the matching translateZ radius) is computed by
 * js/veteran-carousel.js from DRUM_ITEM_WIDTH — keep that constant and the
 * width/margin-left values below in sync if either changes.
 */

.drum-viewport {
	perspective: 3500px;
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 190px;
	max-height: 360px;
	margin: 3rem auto 1.5rem;
	max-width: 100%;
	display: flex;
	align-items: center;
}

.drum {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

.drum-item {
	position: absolute;
	top: 0;
	left: 50%;
	width: 230px;
	margin-left: -115px;
	height: 100%;
	backface-visibility: hidden;
	touch-action: pan-y;
}

.drum-item a {
	display: block;
	height: 100%;
	position: relative;
}

.drum-item img {
	display: block;
	max-height: 100%;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	-webkit-user-drag: none;
	user-select: none;
}

.drum-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: .25rem;
	padding: .5rem 1rem;
}

.drum-caption p {
	margin-bottom: 0;
}

.drum-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.4);
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	cursor: pointer;
}

.drum-control:hover,
.drum-control:focus {
	background-color: rgba(0, 0, 0, 0.7);
}

.drum-prev {
	left: 0.5rem;
}

.drum-next {
	right: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.drum {
		transition: none;
	}
}