@layer components {

	#hero-slider {
		position: relative;
		height: var(--hero_section--height);
		overflow: hidden;
	}

	#hero-slider .slides {
		height: 100%;
	}

	#hero-slider .slide {
		display: none;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#hero-slider .slide.active {
		display: block;
	}

	#hero-slider .hero-inner {
		height: 100%;
		display: flex;
		align-items: center;
		max-width: 100%;
	}


	.left-box {
		max-width: 60%;
		text-align: left;
	}

	.left-box .hero-desc {
		position: relative;
	}

	.left-box .hero-desc::before,
	.left-box .hero-desc::after {
		content: "";
		position: absolute;
		height: var(--space-xxs);
	}

	.left-box .hero-desc::before {
		top: 0;
		left: 0;
		width: 30%;
	}

	.left-box .hero-desc::after {
		right: 0;
		bottom: 0;
		width: 30%;
	}


	.center-box {
		max-width: 70%;
		margin: 0 auto;
		text-align: center;
	}


	.right-box {
		max-width: 100%;
		margin-left: 60%;
		text-align: left;
	}

	.right-box .hero-badge {
		position: relative;
	}

	.right-box .hero-badge::before,
	.right-box .hero-badge::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		height: var(--space-xxs);
	}

	.right-box .hero-badge::before {
		width: 100%;
	}

	.right-box .hero-badge::after {
		width: 60%;
	}
	.hero-inner .block-soft {
		backdrop-filter: blur(8px);
		border-radius: var(--radius-lg);
		padding: var(--space-lg);
	}
}