/* =========================
   CINEMATIC DECK CAROUSEL
========================= */

.deck {

	position: relative;

	width: 100%;
	max-width: 1400px;

	height: 62vh;

	margin: 0 auto 6rem auto;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}

/* TRACK */

.deck-track {

	display: flex;
	align-items: center;

	gap: 1rem;

	transition: transform 0.8s cubic-bezier(.22,.61,.36,1);

	will-change: transform;
}

/* CARDS */

.deck .card {

	flex: 0 0 60%;

	height: 48vh;

	position: relative;

	transform: scale(0.82);

	opacity: 0.25;

	filter: blur(1px);

	transition:
		transform 0.8s ease,
		opacity 0.8s ease,
		filter 0.8s ease;

	pointer-events: none;
}

/* IMAGES */

.deck .card img {

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 18px;
}

/* ACTIVE CENTER CARD */

.deck .card.active {

	transform: scale(1);

	opacity: 1;

	filter: blur(0);

	z-index: 5;
}

/* SIDE CARDS */

.deck .card.prev,
.deck .card.next {

	opacity: 0.5;

	transform: scale(0.88);

	filter: blur(0.5px);
}

/* =========================
   BUTTONS
========================= */

.deck-btn {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	background: none;

	border: none;

	color: white;

	font-size: 5rem;

	font-weight: 200;

	font-family: "Cormorant Garamond", serif;

	cursor: pointer;

	z-index: 20;

	opacity: 0.55;

	padding: 0;

	line-height: 1;

	transition:
		transform 0.3s ease,
		opacity 0.3s ease,
		letter-spacing 0.3s ease;
}

/* HOVER */

.deck-btn:hover {

	opacity: 1;

	transform: translateY(-50%) scale(1.08);

	letter-spacing: 0.08em;
}

/* POSITION */

.deck-btn.left {

	left: 3rem;
}

.deck-btn.right {

	right: 3rem;
}

/* MOBILE */

@media (max-width: 768px) {

	.deck {

		height: 52vh;
	}

	.deck .card {

		flex: 0 0 82%;

		height: 40vh;
	}

	.deck-btn {

		font-size: 3.5rem;
	}

	.deck-btn.left {

		left: 1rem;
	}

	.deck-btn.right {

		right: 1rem;
	}
}