#slideshow {
	position: relative;
	width: 100%;
	height: 360px;
	overflow: hidden;
  
	.slides figure {
		position: absolute;
		margin:0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 0;
		transition: opacity 1s ease, transform 1s ease;
		
		figure.active {
			opacity: 1;
			z-index: 1;
		}

		img { object-fit: cover; }
		
		figcaption {
			position: absolute;
			bottom: 0;
			z-index: 1000;
			background: hsla(0,0%,100%,0.3);
			padding: 0.5rem;
			width: 100%;
		}
	}
	
	button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 2rem;
		background: rgba(0, 0, 0, 0.4);
		color: white;
		border: none;
		cursor: pointer;
		padding: 0.2em 0.5em;
		z-index: 2;
	}
	
	.prev { left: 10px; }
	.next { right: 10px; }
}