@use "../global" as *;
.about-2 {
	background: linear-gradient(184deg, var(--bs-tertiary-bg) 0%, var(--bs-light-bg-subtle) 25.55%);
	@include screen(xl) {
		position: relative;
		z-index: 1;
	}
	&::after {
		@include screen(xl) {
			content: "";
			position: absolute;
			inset: 0;
			background-image: url(../img/shapes/about-2-shape.png);
			background-size: cover;
			background-position: center bottom;
			background-repeat: no-repeat;
			z-index: -1;
		}
	}
	&__img {
		position: absolute;
		left: 50%;
		bottom: 0;
		@include screen(xl) {
			animation: upDown 5s linear infinite;
		}
	}
	&__separator {
		@include screen(xl) {
			position: relative;
			z-index: 1;
		}
		&::before {
			@include screen(xl) {
				content: "";
				position: absolute;
				top: 5%;
				bottom: 5%;
				left: 50%;
				width: 1px;
				background-color: var(--bs-border-color);
				z-index: -1;
			}
		}
		&::after {
			@include screen(xl) {
				content: "";
				position: absolute;
				top: 50%;
				left: 5%;
				right: 5%;
				height: 1px;
				background-color: var(--bs-border-color);
				z-index: -1;
			}
		}
	}
}
