.les-layout-flex {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}

.les-copy-flex {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

.les-heading {
	color: var(--core-rich--black, #010203);
}


.les-desktop-cta {
	display: none;
}

.les-cta-chevron {
	margin-top: 4px;
}

.les-cta-chevron path {
	transition: fill .25s ease;
}

.les-interactive-flex {
	display: none;
}

.les-mobile-swiper-flex {
	display: flex;
	flex-direction: column;
	width: 100%;
	row-gap: 20px;
}

{# Swiper styles #}
.les-carousel {
	width: 100%;
	max-width: 370px;
}
.les-carousel-wrapper {

}

.les-carousel-wrapper .swiper-slide {
	height: auto;
}

.les-carousel-navigation {
	position: relative;
}

.les-carousel-pagination {
	display: flex;
	justify-content: center;
}

.les-carousel-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background-color: transparent;
	border: 1px solid var(--core-rich-black, #010203);
	opacity: 1;
}
.les-carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--core-rich-black, #010203);
}

.les-mobile-cta {
	max-width: 560px;
	margin: 12px auto 0;
}

.les-mini-grid {
	display: grid;
	justify-items: center;
	grid-template-columns: 1fr;
	gap: 32px;
}

.les-mini-grid > div {
	max-width: 370px;
}

.les-mini-grid .lec-copy-flex {
	animation: unset;
	transition: unset;
}

@media screen and (min-width: 768px) {
	.les-layout-flex {
		row-gap: 40px;
	}

	.les-top-flex {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
	}

	.les-desktop-cta {
		display: flex;
	}

	.les-copy-flex {
		align-items: center;
		text-align: center;
	}

	.les-carousel {
		max-width: unset;
	}

	.les-interactive-flex {
		/* 		display: grid;
		grid-template-columns: repeat(3, 1fr); */
		display: flex;
		flex-direction: row;
		column-gap: 32px;
		position: relative;
	}

	.les-mobile-swiper-flex {
		row-gap: 40px;
	}

	.les-mobile-swiper-flex {
		display: none;
	}

	.les-mobile-cta {
		display: none;
	}

	.les-mini-grid[data-cards="2"] {
		grid-template-columns: repeat(2, 1fr);
	}

	.les-mini-grid[data-cards="2"] :first-child {
		justify-self: flex-end;
	}

	.les-mini-grid[data-cards="2"] :last-child {
		justify-self: flex-start;
	}

	/* 	custom functionality styles */
	.live-events-card {
		transition: width .3s ease, max-width .3s ease;
	}
	.live-events-card[data-active="true"] {
		max-width: 512px;
	}

	.live-events-card[data-active="false"] {
		max-width: 97px;
	}

	.lec-feat-logo {
		pointer-events: none;
		opacity: 1;
		transition: opacity .3s ease;
	}

	.live-events-card[data-active="false"] .lec-feat-logo {
		opacity: 0;
	}

	.lec-content-flex {
		transition: flex-grow .3s ease, width .3s ease;
	}

	.live-events-card[data-active="false"] .lec-content-flex {
		flex-grow: 1;
		width: max-content;
	}

	.lec-header-flex {
		transition: flex-direction .3s ease, transform .3s ease;
	}

	.live-events-card[data-active="false"] .lec-header-flex {
		flex-direction: row;
		transform: rotate(90deg) translateY(-125%);
		transform-origin: top left;
	}
	
	.live-events-card[data-active="false"] .lec-title {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}



	.lec-copy-flex {
/* 		height: 100%; */
		animation: moveLeft 0.5s forwards;
		transition: opacity .3s ease;
	}


	.live-events-card[data-active="false"] .lec-copy-flex {
/* 		height: 0; */
		opacity: 0;
		/* 		transform: translateX(100%); */
		animation: moveRight .3s forwards;

		/* 		position: absolute;
		inset: auto auto 0 0;
		content: '';
		width: max-content; */
	}

	.live-events-card[data-active="false"] .lec-cta {
		visibility: hidden;
	}


}



@media screen and (min-width: 992px) {
	.les-layout-flex {
		row-gap: 20px;
	}


	.les-top-flex {
		flex-direction: row;
		align-items: flex-end;
		row-gap: 20px;
	}

	.les-copy-flex {
		text-align: left;
		align-items: flex-start;
	}

	.les-heading {
		width: 100%;
		max-width: 970px;
	}

	
/* 	custom functionality styles */
		.live-events-card[data-active="true"] {
		max-width: 605px;
	}

	.live-events-card[data-active="false"] {
		max-width: 250.5px;
	}
	
	.live-events-card[data-active="false"] .lec-feat-logo {
		opacity: 1;
	}
	
	.live-events-card[data-active="false"] .lec-content-flex {
		width: 100%;
		justify-content: flex-end;
		flex: unset;
	}
	
	.live-events-card[data-active="false"] .lec-header-flex {
		flex-direction: column;
  transform: unset;
	}
	
	.live-events-card[data-active="false"] .lec-title {
		width: 100%;
		white-space: normal;
	}
	
	.lec-copy-flex {
		height: 100%;
		transition: opacity .3s ease, height .1s ease;
	}
	
	.live-events-card[data-active="false"] .lec-copy-flex {
		height: 0;
	}
}



@media screen and (min-width: 1200px) {

}


@keyframes moveRight {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}

@keyframes moveLeft {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}