.bb-riwi-video {
	position: relative;
	z-index: 1;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	padding: var(--bb-space-5xl) var(--bb-space-xl);
}

.bb-riwi-video::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: calc(-1 * var(--bb-space-xl));
	right: 0;
	bottom: calc(-1 * var(--bb-space-xl));
	left: 0;
	background:
		repeating-linear-gradient(to right, rgba(66, 67, 85, .44) 0px, rgba(66, 67, 85, .44) 1.5px, transparent 1.5px, transparent 308.78px),
		repeating-linear-gradient(to bottom, rgba(66, 67, 85, .167) 0px, rgba(66, 67, 85, .167) 1.5px, transparent 1.5px, transparent 308.78px),
		linear-gradient(to bottom, var(--bb-color-bg-card) 0%, var(--bb-color-bg-elevated) 100%);
}

.bb-riwi-video__inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bb-space-4xl);
}

.bb-riwi-video__header {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--bb-space-md);
	max-width: 100%;
}

.bb-riwi-video__heading {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: var(--bb-font-heading-h2-weight);
	font-size: calc(var(--bb-font-heading-h2-size) * 0.8);
	line-height: var(--bb-font-heading-h2-line-height);
	color: var(--bb-color-text-primary);
}

.bb-riwi-video__description {
	margin: 0;
	font-family: var(--bb-font-display);
	font-weight: var(--bb-font-body-large-weight);
	font-size: calc(var(--bb-font-body-large-size) * 0.8);
	line-height: var(--bb-font-body-large-line-height);
	color: var(--bb-color-text-primary);
	max-width: 1183px;
}

.bb-riwi-video__placeholder,
.bb-riwi-video__player {
	width: 100%;
	aspect-ratio: 1193 / 510;
	border-radius: 39px;
	background: var(--bb-color-bg-base);
	overflow: hidden;
}

.bb-riwi-video__player {
	position: relative;
	cursor: pointer;
	border: none;
	padding: 0;
}

.bb-riwi-video img.bb-riwi-video__thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-riwi-video button.bb-riwi-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border: none;
	border-radius: var(--bb-radius-pill);
	background: var(--bb-color-accent-primary);
	color: var(--bb-color-accent-on-accent);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.bb-riwi-video button.bb-riwi-video__play:hover,
.bb-riwi-video button.bb-riwi-video__play:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
}

.bb-riwi-video__play svg {
	margin-left: 6px;
}

.bb-riwi-video__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}

.bb-riwi-video__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--bb-space-sm) var(--bb-space-xl);
	border-radius: var(--bb-radius-pill);
	background: var(--bb-color-accent-primary);
	font-family: var(--bb-font-display);
	font-weight: 600;
	font-size: clamp(20.8px, calc(15.38px + 0.397vw), 23px);
	color: var(--bb-color-accent-on-accent);
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 1024px) {
	.bb-riwi-video {
		padding: var(--bb-space-3xl) var(--bb-space-xl);
	}
}

@media (max-width: 767px) {
	.bb-riwi-video {
		padding: var(--bb-space-3xl) var(--bb-space-lg);
	}

	.bb-riwi-video__inner {
		gap: var(--bb-space-xl);
	}

	.bb-riwi-video__heading {
		font-size: 26px;
		line-height: 1.3;
	}

	.bb-riwi-video__description {
		font-size: 15px;
		line-height: 1.4;
	}

	.bb-riwi-video__placeholder,
	.bb-riwi-video__player {
		aspect-ratio: 16 / 9;
		border-radius: var(--bb-radius-lg);
	}

	.bb-riwi-video button.bb-riwi-video__play {
		width: 64px;
		height: 64px;
	}

	.bb-riwi-video__cta {
		padding: 4.36px 10.9px;
		font-size: 14.34px;
	}
}