.carousel-wrapper { position: relative; overflow: hidden;}
.carousel-slide { display: none; transition: opacity 1s ease-in-out; }
.carousel-slide img {object-fit:cover;object-position:50% 50%;width:100%;height:100%;}
.carousel-slide.active { display: block; }
.carousel-text { position: absolute; bottom: 20px; width: 100%; text-align: center; }
.carousel-btn { padding: 10px 20px; background: #000; color: #fff; text-decoration: none; }

.carousel-slide[data-animation="fade"] { animation: fadeIn 1s ease-in-out; }
.carousel-slide[data-animation="slide"] { animation: slideIn 1s ease-in-out; }
.carousel-slide[data-animation="zoom"] { animation: zoomIn 1s ease-in-out; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes zoomIn { from { transform: scale(0.8); } to { transform: scale(1); } }

.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	color: #fff;
	cursor: pointer;
	z-index: 10;
	padding: 10px;
	background: rgba(0,0,0,0.5);
}
.carousel-arrow.left { left: 10px; }
.carousel-arrow.right { right: 10px; }