@import "theme";

.carousel
{
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 24px;
	transition: transform 0.3s ease-out;

	&:intro
	{
		transform: scale( 1.5 );
	}
}

// The cards are siblings, so the hero panel itself must sit above the side
// cards or its overhanging cycle buttons render behind the next card.
// Stays below the countdown overlay (z 50) and the CTA (z 60).
.card-hero
{
	z-index: 10;
}

.card-prev, .card-next
{
	z-index: 1;
}

.card-prev .map-tile
{
	margin-right: -10px;
}

.card-next .map-tile
{
	margin-left: -10px;
}