@scope ([data-wue-scope-start="components/billboard-carousel"]) {
:scope {
		width: 100%;
		height: auto;
		overflow: visible;
		position: relative;
		--swiper-theme-color: black;
		--swiper-navigation-color: white;
		--swiper-pagination-bottom: 2rem;		
		
		.swiper-slide {
			height: auto;
			/* max-height: 80vh; */
				/* max-height: 42vh; */
			@media (width >= 1024px) {
				max-height: 42rem;
			}
			overflow: hidden;
			&:not(.swiper-slide-visible) .card {
				opacity: .2;
			}
		}

		p {
			max-width: 69ch;
		}

		.slide-grid {
			display: grid;
			grid-template-areas: 'slide';
			height: 100%;
			overflow: hidden;
			container: slide-grid / inline-size;
			> * {
				grid-area: slide;
				width: 100%;
				height: 100%;
			}

			.slide-background {
				width: 100%;
				height: 100%;
				overflow: hidden;
				img, video {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: var(--bg-focus-desktop-x, 50%) var(--bg-focus-desktop-y, 50%);
					@container (width < 768px) {
						object-position: var(--bg-focus-mobile-x, 50%) var(--bg-focus-mobile-y, 50%);
					}
				}

				&:before {
					content: '';
					position: absolute;
					z-index: 0;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					/* background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0) 50%); */
					background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
				}
			}
			
			.page-container {
				padding-block: 10rem;
				padding-inline: 4rem;
				color: white;
				display: flex;
				flex-direction: column;
				justify-content: end;
				align-items: start;
				position: relative;
				z-index: 1;
			}
		}

		.swiper-controls {
			position: absolute;
			z-index: 10;
			width: 100%;
			max-width: var(--page-container-max-width);
			height: 100%;
			top: 0;
			left: 50%;
			transform: translate(-50%, 0%);
			pointer-events: none;
			> * {
				pointer-events: all;
			}
		}	
		
		@media (width <= 1024px) {
			.slide-grid {
				.page-container {
					padding-block: 8rem;
					padding-inline: 2rem;
				}
			}
			.swiper-button-prev, .swiper-button-next {
				display: none;
			}
		}
	}
}