/* CAROUSEL */

body {
	width: 100%;
}

.carousel-wrapper {
	margin-top: 70px;
}

.carousel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.media {
	position: relative;
	height: 100%;
	width: 100%;
	padding: 1em;
}

@media screen and (max-width: 800px) {
	.media img,
	.media video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media screen and (min-width: 800px) {
	.carousel-wrapper {
		display: flex;
		position: relative;
		align-items: flex-start;
		white-space: nowrap;
		height: 100vh;
		margin-top: 0;
		margin-left: 300px;
	}

	.carousel {
		height: 100%;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: clip;
		justify-content: center;
		align-items: center;
		flex: 0 0 auto;
	}

	.media {
		padding: 0 1em;
		height: 100%;
		width: 100%;
	}

	.media img,
	.media video {
		height: 100%;
		object-fit: cover;
	}
}

/* CAROUSEL */