.bo-featured-slider {
	width: min(100%, 550px);
	height: var(--bo-slider-height, 330px);
	position: relative;
	margin-inline: auto;
	overflow: hidden;
	background: #d8dde3;
	color: #333;
}

.bo-featured-slider__viewport,
.bo-featured-slider__slide,
.bo-featured-slider__link {
	width: 100%;
	height: 100%;
}

.bo-featured-slider__slide {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s ease;
}

.bo-featured-slider__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .34) 100%);
}

.bo-featured-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.bo-featured-slider__link {
	position: relative;
	display: block;
	color: inherit;
}

.bo-featured-slider__link:hover,
.bo-featured-slider__link:focus {
	text-decoration: none;
}

.bo-featured-slider__title {
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 82px;
	display: block;
	padding: 10px 12px;
	border-radius: 5px;
	background: rgba(245, 247, 250, .86);
	color: #4b5058;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.05;
}

.bo-featured-slider__arrow {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 5px;
	background: rgba(245, 247, 250, .56);
	color: #7a7f87;
	cursor: pointer;
	transform: translateY(-50%);
}

.bo-featured-slider__arrow:hover,
.bo-featured-slider__arrow:focus {
	background: rgba(245, 247, 250, .82);
	color: #4b5058;
}

.bo-featured-slider__arrow span {
	margin-top: -3px;
	font-size: 2.8rem;
	line-height: 1;
}

.bo-featured-slider__arrow--prev {
	left: 30px;
}

.bo-featured-slider__arrow--next {
	right: 30px;
}

.bo-featured-slider__dots {
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.bo-featured-slider__dots button {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .58);
	cursor: pointer;
}

.bo-featured-slider__dots button.is-active {
	background: #fff;
}

@media (max-width: 680px) {
	.bo-featured-slider {
		width: 100%;
		height: min(var(--bo-slider-height, 330px), 260px);
	}

	.bo-featured-slider__title {
		right: 18px;
		bottom: 20px;
		left: 58px;
		font-size: 1.05rem;
	}

	.bo-featured-slider__arrow {
		width: 34px;
		height: 34px;
	}

	.bo-featured-slider__arrow--prev {
		left: 12px;
	}

	.bo-featured-slider__arrow--next {
		right: 12px;
	}
}