.diapo {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

.diapo__background_image_container {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.diapo__background_image {
	width: 100%; 
	height: 100%; 
	object-fit: fill; 
}


.diapo__title {
	margin-top: 3rem; 
	text-align: center;
	color: white;
}

.diapo__container {
	margin-top: 3rem;
	width: 100vw;
	height: calc(9/16 * 100vw); 
	position: relative;
}

.diapo__slider {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
}

.diapo__slide {
	flex: 0 0 100%;
	height: 100%;
	width: 100%;
}

.diapo__image {
	height: 100%;
	width: 100%;
	object-fit: contain; 
}

.diapo__button {
	color: white;
	border: none;	
	font-size: 2rem;
	background-color: rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
}

.diapo__prev {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}

.diapo__next {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translate(-100%, -50%);
	z-index: 5;
}

@media (min-width: 768px) {
	.diapo {
		min-height: 100vh;
	}
	
	.diapo__container {
		width: 80vw;
		height: calc(9/16 * 70vw); 
	}

	.diapo__button {
		font-size: 3rem;
		cursor: pointer;
	}	

	.diapo__button:hover {
		background-color: rgba(0, 0, 0, 0.15);
	}
}