@layer components {
	.hero-carousel-section {
		position: relative;
		overflow: clip;
		background-color: var(--color-bg-dark);
	}

	.hero-carousel,
	.hero-carousel__scrim {
		position: absolute;
		inset: 0;
		grid-column: bleed;
	}

	/* on desktop, confine the imagery to the right portion so the text has its own clean space on the left */
	@media (min-width: 50em) {
		.hero-carousel {
			-webkit-mask-image: linear-gradient(to right, transparent 25%, black 60%);
			mask-image: linear-gradient(to right, transparent 25%, black 60%);
		}
	}

	.hero-slide {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 1s ease-in-out;
		background: var(--slide-bg, var(--color-bg-dark));
	}

	.hero-slide.is-active {
		opacity: 1;
	}

	.hero-carousel__scrim {
		background: linear-gradient(
			to right,
			rgba(20, 18, 15, 0.78) 0%,
			rgba(20, 18, 15, 0.55) 55%,
			rgba(20, 18, 15, 0.35) 100%
		);
		pointer-events: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.hero-slide {
			transition: none;
		}
	}
}