.bh-carousel {
	container-type: inline-size;
	background: #f5ece0;
}
.bh-carousel-stage {
	position: relative;
	height: clamp(380px, 65vh, 570px);
	background: linear-gradient(100deg, #efe0d0, #f8efe4 49%, #efe0d0);
	touch-action: pan-y pinch-zoom;
}
.bh-carousel-slide {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 450ms ease;
}
.bh-carousel-slide.is-active { opacity: 1; pointer-events: auto; }
.bh-carousel-slide a { display: block; height: 100%; max-width: 100%; }
.bh-carousel-slide picture { display: block; height: 100%; max-width: 100%; }
.bh-carousel-slide img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.bh-carousel-slide:not(.is-active) img:not([src]) { visibility: hidden; }
.bh-carousel-slide a:focus-visible { outline-offset: -5px; }
.bh-carousel-arrows[hidden], .bh-carousel-dots[hidden] { display: none; }
.bh-carousel-arrows button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #b89e89;
	border-radius: 50%;
	color: #651f31;
	background: #fff8eeed;
	font: 29px/1 system-ui, sans-serif;
	cursor: pointer;
}
.bh-carousel-arrows [data-prev] { left: max(12px, calc(50% - 300px)); }
.bh-carousel-arrows [data-next] { right: max(12px, calc(50% - 300px)); }
.bh-carousel-dots { display: flex; justify-content: center; }
.bh-carousel-dots button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.bh-carousel-dots button::before {
	content: '';
	width: 8px;
	height: 8px;
	border: 1px solid #7c4e4e;
	border-radius: 50%;
}
.bh-carousel-dots button[aria-current]::before { background: #742936; }
.bh-carousel :focus-visible { outline: 2px solid #742936; }
@media (min-width: 1024px) {
	.bh-carousel-stage {
		height: auto;
		aspect-ratio: 2 / 1;
	}
	.bh-carousel-slide :is(a, picture, img) { width: 100%; }
	.bh-carousel-arrows [data-prev] { left: clamp(12px, 2vw, 32px); }
	.bh-carousel-arrows [data-next] { right: clamp(12px, 2vw, 32px); }
}
@media (max-width: 640px) {
	.bh-carousel-stage { height: var(--bh-carousel-height); }
	.bh-carousel-arrows [data-prev] { left: 8px; }
	.bh-carousel-arrows [data-next] { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.bh-carousel-slide { transition: none; }
}