@keyframes rb-slider-fade-in-left {
	0% {
		translate: -2.5rem 0;
		opacity: 0;
	}

	100% {
		translate: 0 0;
		opacity: 1;
	}
}

.rb-slider {
	--rb-slider-height: 6.875rem;
	--rb-slider-button-alt-color: #3a3b3d;
	--rb-slider-bold-color: #e4a025;
	--rb-slider-title-color: white;
	--rb-slider-text-color: white;
	--rb-slider-font-family: Raleway, sans-serif;

	min-height: (100vh - var(--rb-slider-height));

	@media (min-width: 64em) {
		--rb-slider-height: 8.75rem;
	}

	@media (min-width: 75em) {
		--rb-slider-height: 10rem;
	}
}

.rb-slider__swiper {
	height: 100%;
}

.rb-slider__wrapper {
	height: 100%;
}

.rb-slider__slide {
	height: 100%;
	padding-block: 3.75rem 7.5rem;
	font-family: var(--rb-slider-font-family);

	@media (min-width: 30em) {
		padding-block: 7.5rem 9rem;
	}

	@media (min-width: 48.625em) {
		padding-block: 7.5rem 2.5rem;
	}

	@media (min-width: 62.5625em) {
		padding-block: 6.875rem 12.5rem;
	}

	@media (min-width: 75em) {
		padding-block: 11.875rem 16.25rem;
	}

	&::before {
		z-index: 2;
		position: absolute;
		inset: 0;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVR4AWJiYGD4D8QMIAYjiAEAAAD//7nL8I4AAAAGSURBVAMADj8BBRD7ez4AAAAASUVORK5CYII=");
		content: '';
		opacity: 1;
	}
}

.rb-slider__background {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	object-fit: cover;
}

.rb-slider__container {
	box-sizing: content-box;
	z-index: 3;
	position: relative;
	max-width: 64rem;
	margin-inline: auto;
	padding-inline: 1.375rem;
	content: '';

	@media (min-width: 30em) {
		padding-inline: 3rem;
	}

	@media (min-width: 48.625em) {
		padding-inline: 4rem;
	}
}

.rb-slider__content {
	max-width: 46.25rem;
}

.rb-slider__title {
	translate: -2.5rem 0;
	color: var(--rb-slider-title-color);
	font-weight: 400;
	font-size: 1.9375rem;
	line-height: 1.09;
	text-wrap: balance;
	opacity: 0;

	@media (min-width: 30em) {
		font-size: 3.25rem;
	}

	@media (min-width: 48.625em) {
		font-size: 4rem;
	}

	@media (min-width: 64em) {
		font-size: 4.5rem;
	}

	b {
		color: var(--rb-slider-bold-color);
		font-weight: 400;
	}
}

.rb-slider__text {
	margin-top: 1.5rem;
	translate: -2.5rem 0;
	color: var(--rb-slider-title-color);
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0;

	@media (min-width: 30em) {
		font-size: 1.375rem;
	}

	@media (min-width: 48.625em) {
		font-size: 1.4375rem;
	}
}

.rb-slider__buttons {
	display: flex;
	flex-direction: column;
	margin-top: 1.25rem;
	gap: 1.25rem;
	translate: -2.5rem 0;
	opacity: 0;

	@media (min-width: 30em) {
		flex-direction: row;
		flex-wrap: wrap;
	}

	@media (min-width: 64em) {
		margin-top: 3.625rem;
		gap: 2.5rem;
	}
}

.rb-slider__button {
	width: 100%;
	text-align: center !important;
}

.rb-slider__button--secondary {
	background-color: var(--rb-slider-title-color) !important;
	color: var(--rb-slider-button-alt-color) !important;

	&:hover,
	&:focus-visible {
		background-color: #eee !important;
	}
}

.rb-slider__slide.swiper-slide-active {
	:is(.rb-slider__title, .rb-slider__text, .rb-slider__buttons) {
		animation: rb-slider-fade-in-left 1s ease-out;
		animation-fill-mode: forwards;
	}

	.rb-slider__title {
		animation-delay: .2s;
	}

	.rb-slider__text {
		animation-delay: .7s;
	}

	.rb-slider__buttons {
		animation-delay: 1.2s;
	}
}
