@use "../global" as *;
.hero-13 {
	position: relative;
	isolation: isolate;
	padding-top: clamp(7rem, 11.57vw + 1rem, 13.75rem);
	padding-bottom: clamp(7rem, 11.57vw + 1rem, 13.75rem);
	&::before {
		@include screen(md) {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -3;
			background-image: linear-gradient(180deg, #e3eaff 45.04%, transparent 83.94%);
			-webkit-mask-image: url(../img/shapes/hero-13-shape-3.png);
			mask-image: url(../img/shapes/hero-13-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: 30%;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -2;
			background-image: linear-gradient(
				184deg,
				var(--bs-primary) 10.5%,
				var(--bs-primary-text-emphasis) 71.34%
			);
			-webkit-mask-image: url(../img/shapes/hero-13-shape-1.png);
			mask-image: url(../img/shapes/hero-13-shape-1.png);
			mask-size: 100% 100%;
			mask-position: center;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
		}
	}
}
