@use "../global" as *;
.hero-11 {
	position: relative;
	isolation: isolate;
	padding-top: clamp(7rem, 11.57vw + 1rem, 13.75rem);
	padding-bottom: clamp(10rem, 16.8vw + 1rem, 20rem);
	background-color: var(--bs-primary-bg-subtle);
	overflow: hidden;
	&::before {
		content: "";
		position: absolute;
		top: 40%;
		left: 0;
		bottom: 0;
		right: 40%;
		z-index: -1;
		background-image: linear-gradient(
			180deg,
			var(--bs-light) 71.14%,
			transparent 94.19%
		);
		-webkit-mask-image: url(../img/shapes/hero-11-shape-3.png);
		mask-image: url(../img/shapes/hero-11-shape-3.png);
		mask-size: 100% 100%;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
	&::after {
		@include screen(md) {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			left: 40%;
			bottom: rem(100);
			background-image: linear-gradient(
				232deg,
				var(--bs-secondary-text-emphasis) 4%,
				var(--bs-secondary) 76%
			);
			-webkit-mask-image: url(../img/shapes/hero-11-shape-1.png);
			mask-image: url(../img/shapes/hero-11-shape-1.png);
			mask-size: 100% 100%;
			mask-position: center;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			z-index: -1;
		}
	}
	&__img {
		@media (min-width: 1920px) {
			position: relative;
			transform: scale(1.15);
			margin-right: -#{rem(120)};
		}
	}
}
