.carousel-container {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	.carousel-background {
		width: 100%;
		height: 100%;
		filter: blur(10px);
		-webkit-filter: blur(10px);
	}

	.carousel-image {
		display: block;
		max-width: 95%;
		max-height: 95%;
		object-fit: cover;
		width: auto;
		height: auto;
	}

	.carousel-next, .carousel-previous {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(255, 255, 255, 0.75);
		filter: drop-shadow(3px 3px 5px black);
		cursor: pointer;
		transition: 0.25s;

		&.carousel-next {
			right: 0;
		}

		&.carousel-previous {
			left: 0;
		}

		&:hover {
			color: white;
			background: rgba(0,0,0,0.25);
			filter: none;
		}
	}

	.carousel-pause {
		position: absolute;
		bottom: 0;
		left: 50%;
		height: 56px;
		width: 56px;
		transform: translate(-50%, -50%);
		color: rgba(255, 255, 255, 0.75);
		filter: drop-shadow(3px 3px 5px black);
		cursor: pointer;
		padding: 1rem;
		border-radius: 50%;
		transition: 0.25s;

		&:hover {
			color: white;
			background: rgba(0,0,0,0.25);
			filter: none;
		}
	}
}
