/* To be patched to main.css when in production */


.carousel-outer {
	--carousel-width-fallback: 1300;
	--carousel-height-fallback: 300;

	--slide-width: var(--carousel-width, var(--carousel-width-fallback));
	--slide-height: var(--carousel-height, var(--carousel-height-fallback));
}

.bespoke-dimensions {
	max-width: 100%;	
}

.bespoke-dimensions .carousel-slide {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: var(--slide-width) / var(--slide-height);
}

@media (min-width: 991px) { 
	.bespoke-dimensions .carousel-slide {
		max-width: 100%;
		width: calc(var(--slide-width) * 1px); /* Add unit */
	}
}

.bespoke-dimensions div[class*="-slide-overlay"] {
	height: 100%;
}

@media (max-width: 991px) { 
	.bespoke-dimensions div[class*="-slide-content"] {
		display: none;
	}
}

.carousel-outer {
	height: auto;
}

@media (min-width: 991px) { 
	.carousel-outer {
		height: calc(var(--slide-height) * 1px); /* Add unit */
	}
}

.bespoke-dimensions + div[class*="-nav-container"] {
	width: calc(var(--slide-width) * 1px); /* Add unit */
}

.featured-navigation {
	padding: 10px;
}