@charset "utf-8";
/* CSS Document */

.carousel{
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

.carousel-track{
	display: flex;
	transition: transform 0.4s ease;
}

.carousel-track img{
	width: 100%;
	flex-shrink: 0;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.carousel-slide{
	width: 100%;
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
	position: relative;
}

.carousel-slide img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.carousel-slide iframe{
	width: 100%;
	height: 100%;
	border: none;
}


.carousel-button{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 44px;
	height: 44px;
	background: rgba(0,0,0,0);
	color: white;
	border: none;
	font-size: 2rem;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 50%;
}

.carousel-button img{
	width: 44px;
	height: auto;
}

.carousel-button.prev {left: 12px}
.carousel-button.next {right: 12px}